import * as _ from 'lodash'; import * as React from 'react'; import MediaQuery from 'react-responsive'; import { Link as ReactRouterLink } from 'react-router-dom'; import styled from 'styled-components'; import { Logo } from 'ts/@next/components/logo'; import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout'; import { NewsletterForm } from 'ts/@next/components/newsletter_form'; interface LinkInterface { text: string; url: string; newWindow?: boolean; } interface LinkRows { heading: string; isOnMobile?: boolean; links: LinkInterface[]; } interface LinkListProps { links: LinkInterface[]; } const linkRows: LinkRows[] = [ { heading: 'Products', isOnMobile: true, links: [ { url: '/next/0x-instant', text: '0x Instant' }, { url: '#', text: '0x Launch Kit' }, ], }, { heading: 'Developers', links: [ { url: '#', text: 'Documentation' }, { url: '#', text: 'GitHub' }, { url: '#', text: 'Whitepaper' }, ], }, { heading: 'About', isOnMobile: true, links: [ { url: '#', text: 'Mission' }, { url: '#', text: 'Team' }, { url: '#', text: 'Jobs' }, { url: '#', text: 'Press Kit' }, { url: '/next/ecosystem-program', text: 'Grant Program' }, ], }, { heading: 'Community', isOnMobile: true, links: [ { url: '#', text: 'Twitter' }, { url: '#', text: 'Rocket Chat' }, { url: '#', text: 'Facebook' }, { url: '#', text: 'Reddit' }, ], }, ]; export const Footer: React.StatelessComponent = () => ( {_.map(linkRows, (row: LinkRows, index) => ( {row.heading} ))} ); const LinkList = (props: LinkListProps) => ( {_.map(props.links, (link, index) => (
  • {link.text}
  • ))}
    ); const FooterWrap = styled.footer` padding: 40px 30px 30px 30px; margin-top: 30px; background-color: ${props => props.theme.footerBg}; color: ${props => props.theme.footerColor}; path { fill: ${props => props.theme.footerColor}; } @media (min-width: 768px) { height: 350px; } `; const FooterColumn = styled(Column)` @media (min-width: 768px) { width: ${props => props.width}; } @media (max-width: 768px) { text-align: left; } `; const FooterSectionWrap = styled(FooterColumn)` @media (max-width: 768px) { width: 50%; & + & { margin-top: 0; margin-bottom: 30px; } } `; const RowHeading = styled.h3` color: inherit; font-weight: 700; font-size: 16px; margin-bottom: 1.25em; opacity: 0.75; `; const List = styled.ul` li + li { margin-top: 8px; } `; const Link = styled(ReactRouterLink)` color: inherit; opacity: 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); } `;