diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 21:54:05 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 21:54:19 +0800 |
commit | 528d882ec4103441b8eacb4d1fdcf1613830a960 (patch) | |
tree | 3fce84611ff950c51f3d5ee20429803c781d2cc0 /packages/website/ts/@next/components/aboutPageLayout.tsx | |
parent | 2471d4098fcbdc3735f77254f7f0cfcb9d597f9d (diff) | |
download | dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.tar dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.tar.gz dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.tar.bz2 dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.tar.lz dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.tar.xz dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.tar.zst dexon-0x-contracts-528d882ec4103441b8eacb4d1fdcf1613830a960.zip |
Creates about page wrapper component, clean up
Diffstat (limited to 'packages/website/ts/@next/components/aboutPageLayout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/aboutPageLayout.tsx | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx new file mode 100644 index 000000000..562f4f810 --- /dev/null +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Link } from 'ts/@next/components/button'; +import { ChapterLink } from 'ts/@next/components/chapter_link'; +import { Column, Section, Wrap } from 'ts/@next/components/layout'; +import { SiteWrap } from 'ts/@next/components/siteWrap'; +import { Heading, Paragraph } from 'ts/@next/components/text'; + +interface Props { + title: string; + description: React.Node; + linkLabel?: string; + linkUrl?: string; +} + +export const AboutPageLayout = (props: Props) => ( + <SiteWrap theme="light"> + <Section isPadLarge={true}> + <Wrap> + <Column colWidth="1/3"> + <ChapterLink to="/next/about/mission">Our Mission</ChapterLink> + <ChapterLink to="/next/about/team">Team</ChapterLink> + <ChapterLink to="/next/about/press">Press</ChapterLink> + <ChapterLink to="/next/about/jobs">Jobs</ChapterLink> + </Column> + + <Column colWidth="2/3"> + <IntroWrap> + <Heading size="medium"> + {props.title} + </Heading> + <Paragraph size="medium" marginBottom="60px"> + {props.description} + </Paragraph> + + {(props.linkLabel && props.linkUrl) && + <Link href={props.linkUrl} isNoBorder={true} isWithArrow={true}> + {props.linkLabel} + </Link> + } + </IntroWrap> + </Column> + </Wrap> + </Section> + + {props.children} + </SiteWrap> +); + +const IntroWrap = styled.div` + max-width: 680px; +`; |