import * as React from 'react'; import styled from 'styled-components'; import { context as compiler } from 'ts/context/compiler'; import { context as cov } from 'ts/context/cov'; import { context as profiler } from 'ts/context/profiler'; import { context as trace } from 'ts/context/trace'; import MainIcon from 'ts/icons/logos/0x.svg'; import { media } from 'ts/variables'; import { Container } from './Container'; import { Alpha, Beta } from './Typography'; const tools = [trace, cov, compiler, profiler]; const Footer: React.StatelessComponent<{}> = () => ( Other tools by 0x {tools.map(({ title, subtitle, icon }) => (
{title}

{subtitle}

))}
0x is an open, permissionless protocol allowing for tokens to be traded on the Ethereum blockchain.
); const StyledFooter = styled.footer` background-color: ${props => props.theme.colors.secondary}; padding-top: 6.25rem; padding-bottom: 5.4375rem; ${media.small`padding-top: 2.5rem;`}; `; const Top = styled.div` display: flex; justify-content: space-between; margin-bottom: 9.375rem; ${media.medium` display: block; margin-bottom: 5.3125rem; `}; ${Alpha} { ${media.medium`margin-bottom: 3.8125rem;`}; } `; const Icon = styled.div` margin-right: 1.3125rem; flex-shrink: 0; ${media.small`margin-right: 0.9375rem`}; `; const Media = styled.div` display: flex; align-items: center; ${Icon} { margin-top: 0.5rem; align-self: flex-start; } `; const List = styled.ul` list-style: none; margin: 0; padding: 0; width: 66.693548387%; display: flex; flex-wrap: wrap; ${media.medium` width: 100%; `}; ${media.small` display: block; `}; `; const ListItem = styled.li` margin-bottom: 3.3125rem; padding-right: 1rem; flex-basis: 50%; :nth-last-of-type(-n + 2) { margin-bottom: 0; ${media.small`margin-bottom: 1.875rem`}; } ${media.small` margin-bottom: 1.875rem :last-of-type { margin-bottom: 0; } `}; `; const ListLink = styled.a < { hoverColor: string } > ` display: flex; align-items: center; :hover { color: ${props => props.theme.colors.dark}; } `; const Small = styled.small` font-size: 1em; max-width: 37.5rem; `; export { Footer };