diff options
author | Fabio Berger <me@fabioberger.com> | 2018-08-27 19:17:23 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-08-27 19:17:23 +0800 |
commit | a26237da6600386dabf2b3e2c94a00ac196bc778 (patch) | |
tree | 5f627159a5cab6269884f0e1f655915cfd0b6219 /packages/website/ts/components/dropdowns | |
parent | 791eae24c0c38368eecf3be4b9c1f162a29ca065 (diff) | |
download | dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.tar dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.gz dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.bz2 dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.lz dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.xz dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.tar.zst dexon-0x-contracts-a26237da6600386dabf2b3e2c94a00ac196bc778.zip |
Implement Developers dropdown
Diffstat (limited to 'packages/website/ts/components/dropdowns')
-rw-r--r-- | packages/website/ts/components/dropdowns/developers_drop_down.tsx | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx new file mode 100644 index 000000000..3ab8af2b3 --- /dev/null +++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx @@ -0,0 +1,180 @@ +import { colors } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { DropDown } from 'ts/components/ui/drop_down'; +import { Deco, Key, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; + +interface KeyToLinkInfo { + [key: string]: LinkInfo; +} + +interface LinkInfo { + link: string; + shouldOpenNewTab: boolean; +} + +const gettingStartedKeyToLinkInfo1: KeyToLinkInfo = { + [Key.BuildARelayer]: { + link: `${WebsitePaths.Wiki}#Build-A-Relayer`, + shouldOpenNewTab: false, + }, + [Key.IntroTutorial]: { + link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + shouldOpenNewTab: false, + }, +}; +const gettingStartedKeyToLinkInfo2: KeyToLinkInfo = { + [Key.TradingTutorial]: { + link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + shouldOpenNewTab: false, + }, + [Key.EthereumDevelopment]: { + link: `${WebsitePaths.Wiki}#Ethereum-Development`, + shouldOpenNewTab: false, + }, +}; +const popularDocsToLinkInfos: KeyToLinkInfo = { + [Key.ZeroExJs]: { + link: WebsitePaths.ZeroExJs, + shouldOpenNewTab: false, + }, + [Key.Connect]: { + link: WebsitePaths.Connect, + shouldOpenNewTab: false, + }, + [Key.SmartContract]: { + link: WebsitePaths.SmartContracts, + shouldOpenNewTab: false, + }, +}; +const usefulLinksToLinkInfo: KeyToLinkInfo = { + [Key.Github]: { + link: constants.URL_GITHUB_ORG, + shouldOpenNewTab: true, + }, + [Key.Whitepaper]: { + link: WebsitePaths.Whitepaper, + shouldOpenNewTab: true, + }, + [Key.Sandbox]: { + link: constants.URL_SANDBOX, + shouldOpenNewTab: true, + }, +}; + +interface DevelopersDropDownProps { + translate: Translate; + menuItemStyles: React.CSSProperties; + menuIconStyle: React.CSSProperties; +} + +interface DevelopersDropDownState {} + +export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> { + public render(): React.ReactNode { + const activeNode = ( + <div className="flex relative" style={{ color: this.props.menuIconStyle.color }}> + <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div> + </div> + ); + return ( + <DropDown + activeNode={activeNode} + popoverContent={this._renderDropdownMenu()} + anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }} + targetOrigin={{ horizontal: 'left', vertical: 'top' }} + style={this.props.menuItemStyles} + popoverStyle={{ borderRadius: 4, width: 433, height: 373, marginTop: 10 }} + /> + ); + } + private _renderDropdownMenu(): React.ReactNode { + const dropdownMenu = ( + <div> + <div style={{ padding: '1.75rem' }}> + {this._renderTitle('Getting started')} + <div className="flex"> + <div className="pr4 mr2">{this._renderLinkSection(gettingStartedKeyToLinkInfo1)}</div> + <div>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</div> + </div> + </div> + <div + style={{ + width: '100%', + height: 1, + backgroundColor: colors.grey300, + }} + /> + <div className="flex" style={{ padding: '1.75rem' }}> + <div className="pr4 mr2"> + <div>{this._renderTitle('Popular docs')}</div> + <div>{this._renderLinkSection(popularDocsToLinkInfos)}</div> + </div> + <div> + <div>{this._renderTitle('Useful links')}</div> + <div>{this._renderLinkSection(usefulLinksToLinkInfo)}</div> + </div> + </div> + <div + style={{ + padding: '1.125rem', + textAlign: 'center', + backgroundColor: '#EDEDED', + borderBottomLeftRadius: 4, + borderBottomRightRadius: 4, + }} + > + <Link + to={WebsitePaths.ZeroExJs/* TODO: Update once we have overview page */} + className="text-decoration-none" + style={{ + color: colors.lightBlueA700, + fontWeight: 'bold', + fontSize: 14, + }} + > + VIEW ALL DOCUMENTATION + </Link> + </div> + </div> + ); + return dropdownMenu; + } + private _renderTitle(title: string): React.ReactNode { + return ( + <div style={{ color: '#999999', fontSize: 14, paddingBottom: 12, fontWeight: 600, letterSpacing: 1 }}> + {title.toUpperCase()} + </div> + ); + } + private _renderLinkSection(keyToLinkInfo: KeyToLinkInfo): React.ReactNode { + const linkStyle: React.CSSProperties = { + color: colors.lightBlueA700, + fontFamily: 'Roboto, Roboto Mono', + }; + const numLinks = _.size(keyToLinkInfo); + let i = 0; + const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => { + i++; + const isLast = i === numLinks; + const linkText = this.props.translate.get(key as Key, Deco.CapWords); + return ( + <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}> + {linkInfo.shouldOpenNewTab ? ( + <a target="_blank" className="text-decoration-none" style={linkStyle} href={linkInfo.link}> + {linkText} + </a> + ) : ( + <Link to={linkInfo.link} className="text-decoration-none" style={linkStyle}> + {linkText} + </Link> + )} + </div> + ); + }); + return <div>{links}</div>; + } +} |