From e78226257265d938e1c3830c8a93199011fa085a Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Fri, 30 Nov 2018 14:15:23 +0100
Subject: Add route links to header

---
 packages/website/ts/@next/components/header.tsx | 75 +++++++++++++++----------
 1 file changed, 44 insertions(+), 31 deletions(-)

(limited to 'packages/website/ts/@next/components/header.tsx')

diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 9b80ec167..b09a7ed89 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -2,13 +2,51 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
+import { Link as ReactRouterLink } from 'react-router-dom';
+
 import { Button } from './button';
 import { Container } from './container';
 import { Logo } from './logo';
 
-interface HeaderInterface {
+interface HeaderProps {
+}
+
+interface LinkProps {
+    href: string;
 }
 
+const links = [
+    { url: '/next/why', text: 'Why 0x' },
+    { url: '#', text: 'Products' },
+    { url: '#', text: 'Developers' },
+    { url: '#', text: 'About' },
+    { url: '#', text: 'Blog' },
+];
+
+const Link: React.StatelessComponent<LinkProps> = props => {
+    const { children, href } = props;
+
+    return (
+        <StyledRouterLink
+            to={href}
+        >
+            {children}
+        </StyledRouterLink>
+    );
+};
+
+export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
+    <Container>
+        <StyledHeader>
+            <Logo/>
+            <Links>
+                {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
+            </Links>
+            <TradeButton href="#">Trade on 0x</TradeButton>
+        </StyledHeader>
+    </Container>
+);
+
 const StyledHeader = styled.header`
     display: flex;
     flex-wrap: wrap;
@@ -18,9 +56,10 @@ const StyledHeader = styled.header`
     padding: 1.666666667rem 0;
 `;
 
-const Text = styled.span`
-    font-size: 1rem;
-    line-height: 1.222222222em;
+const TradeButton = styled(Button)`
+    @media (max-width: 999px) {
+        display: none;
+    }
 `;
 
 const Links = styled.div`
@@ -28,7 +67,7 @@ const Links = styled.div`
     justify-content: space-around;
 `;
 
-const Link = styled.a`
+const StyledRouterLink = styled(ReactRouterLink)`
     color: rgba(255, 255, 255, 0.5);
     font-size: 1rem;
     margin: 0 1.666666667em;
@@ -39,29 +78,3 @@ const Link = styled.a`
         color: rgba(255, 255, 255, 1);
     }
 `;
-
-const TradeButton = styled(Button)`
-    @media (max-width: 999px) {
-        display: none;
-    }
-`;
-
-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, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
-            </Links>
-            <TradeButton href="#">Trade on 0x</TradeButton>
-        </StyledHeader>
-    </Container>
-);
-- 
cgit