diff options
author | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-10-18 19:28:44 +0800 |
commit | b158a6d7226fb50ecedcc07da8ef30e5e5690e46 (patch) | |
tree | 3cab0f55e7f8961be4f6ecc49f5a3f503cd21bc9 /packages/dev-tools-pages/ts/components/Footer.tsx | |
parent | c616b53c9c95edcc9da34aaaee3b91f5f1787636 (diff) | |
download | dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.gz dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.bz2 dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.lz dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.xz dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.zst dexon-0x-contracts-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.zip |
initial commit
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Footer.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Footer.tsx | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx new file mode 100644 index 000000000..82b2de1a3 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -0,0 +1,91 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Alpha, Beta } from './Typography'; +import { withContext, Props } from './withContext'; +import Container from './Container'; + +import MainIcon from 'ts/icons/logos/0x.svg'; +import compiler from 'ts/context/compiler'; +import cov from 'ts/context/cov'; +import profiler from 'ts/context/profiler'; +import trace from 'ts/context/trace'; + +const tools = [trace, cov, compiler, profiler]; + +function Footer(props: Props) { + const { colors } = props; + + return ( + <StyledFooter background={colors.secondary}> + <Container> + <Top> + <Alpha>Other tools by 0x</Alpha> + <List> + {tools.map(({ title, subtitle, icon }) => ( + <ListItem as="li" key={title}> + <Icon as={icon} /> + <div> + <Beta>{title}</Beta> + <p>{subtitle}</p> + </div> + </ListItem> + ))} + </List> + </Top> + <Media as="aside"> + <Icon as={MainIcon} /> + <Small> + Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on + the Ethereum blockchain. + </Small> + </Media> + </Container> + </StyledFooter> + ); +} + +const StyledFooter = styled.footer` + background-color: ${(props: { background: string }) => props.background}; + padding-top: 6.25rem; + padding-bottom: 5.4375rem; +`; + +const Top = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 9.375rem; +`; + +const Media = styled.div` + display: flex; + align-items: center; +`; + +const Icon = styled.div` + margin-right: 1.3125rem; +`; + +const List = styled.ul` + display: flex; + width: 66.693548387%; + flex-wrap: wrap; + flex-direction: row; + margin: 0; + padding: 0; +`; + +const ListItem = styled(Media)` + flex-basis: 50%; + margin-bottom: 3.3125rem; + :nth-last-of-type(-n + 2) { + margin-bottom: 0; + } +`; + +const Small = styled.small` + font-size: 1em; + max-width: 37.5rem; +`; + +export default withContext(Footer); |