diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
commit | 65af195054e1f6de41d36a2d30d8342bef9752c0 (patch) | |
tree | 8559d71d6dd4269139afa5334b317f6efe90acd3 /packages/website/ts/components/dropdowns/dropdown_developers.tsx | |
parent | 9f47f90c6e80ba9a61bcb6065fed1e2c6be8c5b7 (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.gz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.bz2 dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.lz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.xz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.zst dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.zip |
Merge branch 'development' into feature/monorepo/release-notes
Diffstat (limited to 'packages/website/ts/components/dropdowns/dropdown_developers.tsx')
-rw-r--r-- | packages/website/ts/components/dropdowns/dropdown_developers.tsx | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/packages/website/ts/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/components/dropdowns/dropdown_developers.tsx new file mode 100644 index 000000000..dc6b70d21 --- /dev/null +++ b/packages/website/ts/components/dropdowns/dropdown_developers.tsx @@ -0,0 +1,180 @@ +import { Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import styled, { withTheme } from 'styled-components'; + +import { Button } from 'ts/components/button'; +import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout'; +import { ThemeValuesInterface } from 'ts/components/siteWrap'; +import { Heading } from 'ts/components/text'; +import { WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; + +interface Props { + theme: ThemeValuesInterface; +} + +interface LinkConfig { + label: string; + url: string; + shouldOpenInNewTab?: boolean; +} + +const introData: LinkConfig[] = [ + { + label: 'Build a relayer', + url: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + label: 'Develop on Ethereum', + url: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + label: 'Make & take orders', + url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + { + label: 'Use networked liquidity', + url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; + +const docsData: LinkConfig[] = [ + { + label: '0x.js', + url: WebsitePaths.ZeroExJs, + }, + { + label: '0x Connect', + url: WebsitePaths.Connect, + }, + { + label: 'Smart Contract', + url: WebsitePaths.SmartContracts, + }, +]; + +const linksData: LinkConfig[] = [ + { + label: 'Wiki', + url: WebsitePaths.Wiki, + }, + { + label: 'Github', + url: constants.URL_GITHUB_ORG, + shouldOpenInNewTab: true, + }, + { + label: 'Protocol specification', + url: constants.URL_PROTOCOL_SPECIFICATION, + shouldOpenInNewTab: true, + }, +]; + +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> + <Link key={`introLink-${index}`} to={item.url}> + {item.label} + </Link> + </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}`}> + <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> + {item.label} + </Link> + </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}`}> + <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}> + {item.label} + </Link> + </li> + ))} + </ul> + </Column> + </StyledWrap> + + <StyledLink + to={WebsitePaths.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; +`; |