diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-11-30 21:15:23 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-11-30 21:17:02 +0800 |
commit | e78226257265d938e1c3830c8a93199011fa085a (patch) | |
tree | c0b62089066853fe0a560c52541a7e79aed04710 /packages/website/ts/@next/components/header.tsx | |
parent | 2ba14d656ef21ef85bf8274020d18ae2cd2515b3 (diff) | |
download | dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.tar dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.tar.gz dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.tar.bz2 dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.tar.lz dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.tar.xz dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.tar.zst dexon-0x-contracts-e78226257265d938e1c3830c8a93199011fa085a.zip |
Add route links to header
Diffstat (limited to 'packages/website/ts/@next/components/header.tsx')
-rw-r--r-- | packages/website/ts/@next/components/header.tsx | 75 |
1 files changed, 44 insertions, 31 deletions
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> -); |