diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-12-15 06:42:55 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-15 06:42:55 +0800 |
commit | e3dcb7107bdd7bd8197818a05b163985026f7ca2 (patch) | |
tree | ee8e5617762c49ab9bdb6bde676f49c91eb2f012 /packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx | |
parent | 6d45beccad44e86ddd692d0cf54c09c29c5d9daf (diff) | |
parent | f7ceb4cf582debf2521ef4797674e31a86ff6a38 (diff) | |
download | dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.gz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.bz2 dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.lz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.xz dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.tar.zst dexon-sol-tools-e3dcb7107bdd7bd8197818a05b163985026f7ca2.zip |
Merge pull request #1375 from bakkenbaeck/website
[WIP] Website
Diffstat (limited to 'packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx')
-rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx new file mode 100644 index 000000000..791eae242 --- /dev/null +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -0,0 +1,186 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import {Link as RouterLink} from 'react-router-dom'; +import styled, {withTheme} from 'styled-components'; + +import {Button} from 'ts/@next/components/button'; +import {Column, FlexWrap, WrapGrid} from 'ts/@next/components/newLayout'; +import {ThemeValuesInterface} from 'ts/@next/components/siteWrap'; +import {Heading} from 'ts/@next/components/text'; + +interface Props { + theme: ThemeValuesInterface; +} + +const introData = [ + { + label: 'Build a relayer', + url: 'https://0xproject.com/wiki#Build-A-Relayer', + }, + { + label: 'Develop on Ethereum', + url: 'https://0xproject.com/wiki#Ethereum-Development', + }, + { + label: 'Make & take orders', + url: 'https://0xproject.com/wiki#Create,-Validate,-Fill-Order', + }, + { + label: 'Use networked liquidity', + url: 'https://0xproject.com/wiki#Find,-Submit,-Fill-Order-From-Relayer', + }, +]; + +const docsData = [ + { + label: '0x.js', + url: 'https://0xproject.com/docs/0x.js', + }, + { + label: '0x Connect', + url: 'https://0xproject.com/docs/connect', + }, + { + label: 'Smart Contract', + url: 'https://0xproject.com/docs/contracts', + }, +]; + +const linksData = [ + { + label: 'Wiki', + url: 'https://0xproject.com/wiki', + }, + { + label: 'Github', + url: 'https://github.com/0xProject', + }, + { + label: 'Whitepaper', + url: 'https://github.com/0xProject/0x-protocol-specification/blob/master/v2/v2-specification.md', + }, +]; + +export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => ( + <> + <DropdownWrap> + <div> + <Heading + asElement="h4" + size={14} + color="inherit" + marginBottom="15px" + isMuted={0.35} + > + Getting Started + </Heading> + + <StyledGrid isCentered={false} isWrapped={true}> + {_.map(introData, (item, index) => ( + <li> + <RouterLink + key={`introLink-${index}`} + to={item.url} + > + {item.label} + </RouterLink> + </li> + ))} + </StyledGrid> + </div> + + <StyledWrap> + <Column width="calc(100% - 15px)"> + <Heading + asElement="h4" + size={14} + color="inherit" + marginBottom="15px" + isMuted={0.35} + > + Popular Docs + </Heading> + + <ul> + {_.map(docsData, (item, index) => ( + <li key={`docsLink-${index}`}> + <RouterLink to={item.url}> + {item.label} + </RouterLink> + </li> + ))} + </ul> + </Column> + + <Column width="calc(100% - 15px)"> + <Heading + asElement="h4" + size={14} + color="inherit" + marginBottom="15px" + isMuted={0.35} + > + Useful Links + </Heading> + + <ul> + {_.map(linksData, (item, index) => ( + <li key={`usefulLink-${index}`}> + <RouterLink to={item.url}> + {item.label} + </RouterLink> + </li> + ))} + </ul> + </Column> + </StyledWrap> + + <StyledLink to="https://0xproject.com/docs" bgColor={props.theme.dropdownButtonBg} isAccentColor={true} isNoBorder={true}> + View All Documentation + </StyledLink> + </DropdownWrap> + </> +)); + +const DropdownWrap = styled.div` + padding: 15px 30px 75px 30px; + + a { + color: inherit; + } + + li { + margin: 8px 0; + } +`; + +const StyledGrid = styled(WrapGrid.withComponent('ul'))` + li { + width: 50%; + flex-shrink: 0; + } +`; + +const StyledWrap = styled(FlexWrap)` + padding-top: 20px; + margin-top: 30px; + position: relative; + + &:before { + content: ''; + width: 100%; + height: 1px; + background-color: ${props => props.theme.dropdownColor}; + opacity: 0.15; + position: absolute; + top: 0; + left:0; + } +`; + +const StyledLink = styled(Button)` + width: 100%; + position: absolute; + bottom: 0; + left: 0; +`; |