aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-11-29 00:40:02 +0800
committerFred Carlsen <fred@sjelfull.no>2018-11-29 00:46:43 +0800
commitec6b47ded03af5459b78f6deabeef37bdf852217 (patch)
tree5e7aa0359a037b0d6883d6c3d80b32118a15019d
parent36d94b894ab6f480e50a539efa25193ec6de3d8b (diff)
downloaddexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.tar
dexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.gz
dexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.bz2
dexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.lz
dexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.xz
dexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.tar.zst
dexon-sol-tools-ec6b47ded03af5459b78f6deabeef37bdf852217.zip
Add footer
-rw-r--r--packages/website/ts/@next/components/footer.tsx121
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx9
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 };