Add ehader

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