diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-11-29 00:40:02 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-11-29 00:46:43 +0800 |
commit | ec6b47ded03af5459b78f6deabeef37bdf852217 (patch) | |
tree | 5e7aa0359a037b0d6883d6c3d80b32118a15019d /packages/website | |
parent | 36d94b894ab6f480e50a539efa25193ec6de3d8b (diff) | |
download | dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.tar dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.gz dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.bz2 dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.lz dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.xz dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.zst dexon-0x-contracts-ec6b47ded03af5459b78f6deabeef37bdf852217.zip |
Add footer
Diffstat (limited to 'packages/website')
-rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 121 | ||||
-rw-r--r-- | packages/website/ts/@next/components/siteWrap.tsx | 9 |
2 files changed, 125 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx new file mode 100644 index 000000000..cf64d6d38 --- /dev/null +++ b/packages/website/ts/@next/components/footer.tsx @@ -0,0 +1,121 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +import { Button } from './button'; +import { Container } from './container'; +import { Logo } from './logo'; + +export interface FooterInterface { +} + +export interface ColInterface { + width: string | number; +} + +export interface LinkInterface { + text: string; + url: string; + newWindow?: boolean; +} + +export interface LinkRowInterface { + heading: string; + links: LinkInterface[]; +} + +const StyledFooter = styled.footer` + background-color: #181818; + margin-top: 3.529411765rem; // 60px +`; + +const Inner = styled.div` + display: flex; + justify-content: space-between; + padding: 2.352941176rem 3.529411765rem; // 40px 60px + text-align: left; +`; + +const Links = styled.div` + display: flex; + justify-content: space-between; +`; + +const Col = styled.div<ColInterface>` + width: ${props => props.width}; +`; + +const Link = styled.a` + color: rgba(255, 255, 255, 0.5); + display: block; + font-size: 16px; + line-height: 20px; + transition: color 0.25s ease-in-out; + text-decoration: none; + + &:hover { + color: rgba(255, 255, 255, 1); + } +`; + +const RowHeading = styled.h1` + color: ${colors.white}; + font-weight: 500; + font-size: 16px; + line-height: 20px; + margin-bottom: 1.25em; +`; + +const linkRows = [ + { + heading: 'Products', + links: [ + { url: '#', text: '0x Instant' }, + { url: '#', text: '0x Launch Kit' }, + ], + }, + { + heading: 'About', + links: [ + { url: '#', text: 'Mission' }, + { url: '#', text: 'Team' }, + { url: '#', text: 'Jobs' }, + { url: '#', text: 'Press Kit' }, + ], + }, + { + heading: 'Community', + links: [ + { url: '#', text: 'Twitter' }, + { url: '#', text: 'Rocket Chat' }, + { url: '#', text: 'Facebook' }, + { url: '#', text: 'Reddit' }, + ], + }, +]; + +const LinkRow: React.StatelessComponent<LinkRowInterface> = ({heading, links}) => ( + <Col width="33%"> + <RowHeading>{heading}</RowHeading> + {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)} + </Col> +) + +export const Footer: React.StatelessComponent<FooterInterface> = ({}) => ( + <StyledFooter > + <Container removePadding={true}> + <Inner> + <Col width="32%"> + <Logo/> + </Col> + <Col width="46%"> + <Links> + {_.map(linkRows, (row, index) => <LinkRow heading={row.heading} links={row.links} />)} + </Links> + </Col> + </Inner> + </Container> + </StyledFooter> +); diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx index 952364f03..406f724f5 100644 --- a/packages/website/ts/@next/components/siteWrap.tsx +++ b/packages/website/ts/@next/components/siteWrap.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { GlobalStyles } from 'ts/@next/constants/globalStyle'; import { Header } from 'ts/@next/components/header'; - +import { Footer } from 'ts/@next/components/footer'; interface Props { @@ -18,10 +18,10 @@ const SiteWrap: React.StatelessComponent<Props> = props => { <Header /> <Main> - { children } + {children} </Main> - <footer>OMG FOOTER</footer> + <Footer/> </> ); }; @@ -33,5 +33,4 @@ const Main = styled.main` margin: 0 auto; `; - -export { SiteWrap } +export { SiteWrap }; |