import { ALink, colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Text } from 'ts/components/ui/text'; import { Deco, Key, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; const gettingStartedKeyToLinkInfo1: ALink[] = [ { title: Key.BuildARelayer, to: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, { title: Key.OrderBasics, to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, ]; const gettingStartedKeyToLinkInfo2: ALink[] = [ { title: Key.DevelopOnEthereum, to: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; const popularDocsToLinkInfos: ALink[] = [ { title: Key.ZeroExJs, to: WebsitePaths.ZeroExJs, }, { title: Key.Connect, to: WebsitePaths.Connect, }, { title: Key.SmartContract, to: WebsitePaths.SmartContracts, }, ]; const usefulLinksToLinkInfo: ALink[] = [ { title: Key.Wiki, to: WebsitePaths.Wiki, }, { title: Key.Github, to: constants.URL_GITHUB_ORG, shouldOpenInNewTab: true, }, { title: Key.Whitepaper, to: WebsitePaths.Whitepaper, shouldOpenInNewTab: true, }, ]; interface DevelopersDropDownProps { location: Location; translate: Translate; menuItemStyles: React.CSSProperties; menuIconStyle: React.CSSProperties; } interface DevelopersDropDownState {} export class DevelopersDropDown extends React.Component { public render(): React.ReactNode { const activeNode = ( {this.props.translate.get(Key.Developers, Deco.Cap)} ); return ( ); } private _renderDropdownMenu(): React.ReactNode { const sectionPadding = '26px'; const dropdownMenu = ( {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')} {this._renderLinkSection(gettingStartedKeyToLinkInfo2)} {this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')} {this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')} {this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)} ); return dropdownMenu; } private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode { const numLinks = links.length; let i = 0; const renderLinks = _.map(links, (link: ALink) => { const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#'); const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki; let to = link.to; if (isWikiLink && isOnWiki) { to = `${link.to.split('#')[1]}`; } i++; const isLast = i === numLinks; const linkText = this.props.translate.get(link.title as Key, Deco.Cap); return ( {linkText} ); }); return ( {!_.isEmpty(title) && ( {title.toUpperCase()} )} {renderLinks} ); } }