Add route links to header

packages/website/ts/@next/components/header.tsx

@@ -2,59 +2,40 @@ 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 {
 }
 
-const StyledHeader = styled.header`
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1.666666667rem 0;
-`;
-
-const Text = styled.span`
-    font-size: 1rem;
-    line-height: 1.222222222em;
-`;
-
-const Links = styled.div`
-    display: flex;
-    justify-content: space-around;
-`;
-
-const Link = styled.a`
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 1rem;
-    margin: 0 1.666666667em;
-    transition: color 0.25s ease-in-out;
-    text-decoration: none;
-
-    &:hover {
-        color: rgba(255, 255, 255, 1);
-    }
-`;
-
-const TradeButton = styled(Button)`
-    @media (max-width: 999px) {
-        display: none;
-    }
-`;
+interface LinkProps {
+    href: string;
+}
 
 const links = [
-    { url: '#', text: 'Why 0x' },
+    { url: '/next/why', text: 'Why 0x' },
     { url: '#', text: 'Products' },
     { url: '#', text: 'Developers' },
     { url: '#', text: 'About' },
     { url: '#', text: 'Blog' },
 ];
 
-export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
+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/>
@@ -65,3 +46,35 @@ export const Header: React.StatelessComponent<HeaderInterface> = ({}) => (
         </StyledHeader>
     </Container>
 );
+
+const StyledHeader = styled.header`
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.666666667rem 0;
+`;
+
+const TradeButton = styled(Button)`
+    @media (max-width: 999px) {
+        display: none;
+    }
+`;
+
+const Links = styled.div`
+    display: flex;
+    justify-content: space-around;
+`;
+
+const StyledRouterLink = styled(ReactRouterLink)`
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 1rem;
+    margin: 0 1.666666667em;
+    transition: color 0.25s ease-in-out;
+    text-decoration: none;
+
+    &:hover {
+        color: rgba(255, 255, 255, 1);
+    }
+`;