aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Footer.tsx
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-18 19:28:44 +0800
committerAugust Skare <post@augustskare.no>2018-10-18 19:28:44 +0800
commitb158a6d7226fb50ecedcc07da8ef30e5e5690e46 (patch)
tree3cab0f55e7f8961be4f6ecc49f5a3f503cd21bc9 /packages/dev-tools-pages/ts/components/Footer.tsx
parentc616b53c9c95edcc9da34aaaee3b91f5f1787636 (diff)
downloaddexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.gz
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.bz2
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.lz
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.xz
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.zst
dexon-sol-tools-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.tsx91
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);