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 {Heading} from 'ts/@next/components/text'; import {GlobalStyle} from 'ts/@next/constants/globalStyle'; interface Props { theme: GlobalStyle; } 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 = withTheme((props: Props) => ( <>
Getting Started {_.map(introData, (item, index) => (
  • {item.label}
  • ))}
    Popular Docs
      {_.map(docsData, (item, index) => (
    • {item.label}
    • ))}
    Useful Links
      {_.map(linksData, (item, index) => (
    • {item.label}
    • ))}
    View All Documentation
    )); 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; `;