diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-11-28 23:26:56 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-11-28 23:26:56 +0800 |
commit | 56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a (patch) | |
tree | 399ef0fcbfc627e0361a5b30e69ef853091927bb /packages/website | |
parent | 969674a5ce99260a1fa0b749611845153c105bc4 (diff) | |
download | dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.tar dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.tar.gz dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.tar.bz2 dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.tar.lz dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.tar.xz dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.tar.zst dexon-0x-contracts-56ca19dc9bc5342ac5e97ad06c20a6083c2f3c2a.zip |
Add ehader
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 54 | ||||
-rw-r--r-- | packages/website/ts/@next/components/logo.tsx | 22 | ||||
-rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 3 | ||||
-rw-r--r-- | packages/website/ts/@next/icons/logo-with-type.svg | 1 |
4 files changed, 79 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx new file mode 100644 index 000000000..615cf53d5 --- /dev/null +++ b/packages/website/ts/@next/components/header.tsx @@ -0,0 +1,54 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { Button } from './button'; +import { Container } from './container'; +import { Logo } from './logo'; + +export interface HeaderInterface { +} + +const StyledHeader = styled.header` + display: flex; + text-align: center; + align-items: center; + justify-content: space-between; + padding: 1.764705882rem 0; +`; + +const Text = styled.span` + font-size: 1rem; + line-height: 1.375rem; +`; + +const Links = styled.div` + display: flex; + justify-content: space-around; +`; + +const Link = styled.a` + color: rgba(255, 255, 255, 0.5); + font-size: 18px; + margin: 0 1.764705882rem; +`; + +const links = [ + { url: '', text: 'Why 0x' }, + { url: '', text: 'Products' }, + { url: '', text: 'Developers' }, + { url: '', text: 'About' }, + { url: '', text: 'Blog' }, +]; + +export const Header: React.StatelessComponent<HeaderInterface> = ({}) => ( + <Container> + <StyledHeader> + <Logo/> + <Links> + {_.map(links, link => <Link>{link.text}</Link>)} + </Links> + <Button text="Trade on 0x" /> + </StyledHeader> + </Container> +); diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx new file mode 100644 index 000000000..2d778408e --- /dev/null +++ b/packages/website/ts/@next/components/logo.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import logoWithType from '../icons/logo-with-type.svg'; + +export interface LogoInterface { + // showType: boolean; +} + +const StyledLogo = styled.div` + text-align: center; +`; + +const Icon = styled.div` + flex-shrink: 0; +`; + +export const Logo: React.StatelessComponent<LogoInterface> = ({}) => ( + <StyledLogo> + <Icon as={logoWithType as 'svg'} /> + </StyledLogo> +); diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 1b0efd145..d9dbabffb 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { GlobalStyles } from 'ts/@next/constants/globalStyle'; +import { Header } from './header' interface Props { @@ -13,7 +14,7 @@ const SiteWrap:React.StatelessComponent<Props> = props => { <> <GlobalStyles /> - <header>0x HEADER</header> + <Header /> { children } diff --git a/packages/website/ts/@next/icons/logo-with-type.svg b/packages/website/ts/@next/icons/logo-with-type.svg new file mode 100644 index 000000000..a7a59a2af --- /dev/null +++ b/packages/website/ts/@next/icons/logo-with-type.svg @@ -0,0 +1 @@ +<svg width="81" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.402 25.28l3.105-3.212-3.86-5.209-4.915-6.954A19.904 19.904 0 0 0 0 20c0 6.1 2.732 11.562 7.04 15.23l6.239-4.408a12.796 12.796 0 0 1-4.877-5.541zM14.72 8.402l3.212 3.105 5.209-3.86 6.954-4.915A19.904 19.904 0 0 0 20 0C13.9 0 8.438 2.732 4.77 7.04l4.408 6.239a12.795 12.795 0 0 1 5.541-4.877zM28.493 17.932l3.86 5.209 4.915 6.954A19.904 19.904 0 0 0 40 20c0-6.1-2.732-11.562-7.04-15.23L26.72 9.178a12.796 12.796 0 0 1 4.877 5.541l-3.105 3.213zM35.23 32.96l-4.408-6.239a12.795 12.795 0 0 1-5.541 4.877l-3.213-3.105-5.209 3.86-6.954 4.915A19.904 19.904 0 0 0 20 40c6.1 0 11.562-2.732 15.23-7.04z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M51.726 19.689c0-6.471 2.704-9.689 6.912-9.689 4.19 0 6.947 3.27 6.947 9.689 0 6.418-2.758 9.671-6.947 9.671-4.19 0-6.912-3.253-6.912-9.671zm6.894-7.59c-3.04 0-4.543 2.815-4.543 7.607 0 2.256.336 4.005.972 5.282l5.975-12.085c-.69-.542-1.485-.804-2.404-.804zm-2.351 14.428c.672.507 1.45.77 2.369.77 3.04 0 4.578-2.834 4.578-7.59 0-2.204-.318-3.936-.972-5.247l-5.975 12.067zm24.377-10.93l-3.853 6.47L81 29.027h-2.581l-3.377-5.63h-.954l-3.447 5.63h-2.51l4.224-6.872-3.8-6.559h2.44l3.11 5.334h.973l3.182-5.334h2.386z" fill="#fff"/></svg>
\ No newline at end of file |