133 lines
3.1 KiB
TypeScript
133 lines
3.1 KiB
TypeScript
import * as _ from 'lodash';
|
|
import * as React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
import {Link as RouterLink} from 'react-router-dom';
|
|
import {Link} from 'ts/@next/components/button';
|
|
import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
|
|
import {Heading} from 'ts/@next/components/text';
|
|
|
|
const introData = [
|
|
{
|
|
label: 'Build a relayer',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: 'Develop on Ethereum',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: 'Make & take orders',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: 'Use networked liquidity',
|
|
url: '#',
|
|
},
|
|
];
|
|
|
|
const docsData = [
|
|
{
|
|
label: '0x.js',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: '0x Connect',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: 'Smart Contract',
|
|
url: '#',
|
|
},
|
|
];
|
|
|
|
const linksData = [
|
|
{
|
|
label: 'Wiki',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: 'Github',
|
|
url: '#',
|
|
},
|
|
{
|
|
label: 'Whitepaper',
|
|
url: '#',
|
|
},
|
|
];
|
|
|
|
export const DropdownDevelopers = () => (
|
|
<>
|
|
<DropdownWrap>
|
|
<div>
|
|
<Heading size={14} color="#5d5d5d">
|
|
Getting Started
|
|
</Heading>
|
|
|
|
<WrapGrid isCentered={false} isWrapped={true}>
|
|
{_.map(introData, (item, index) => (
|
|
<RouterLink to={item.url}>
|
|
{item.label}
|
|
</RouterLink>
|
|
))}
|
|
</WrapGrid>
|
|
</div>
|
|
|
|
<StyledWrap>
|
|
<Column colWidth="1/2" isNoPadding={true}>
|
|
<Heading size={14} color="#5d5d5d">
|
|
Popular Docs
|
|
</Heading>
|
|
|
|
<ul>
|
|
{_.map(docsData, (item, index) => (
|
|
<li>
|
|
<RouterLink to={item.url}>
|
|
{item.label}
|
|
</RouterLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Column>
|
|
|
|
<Column colWidth="1/2" isNoPadding={true}>
|
|
<Heading size={14} color="#5d5d5d">
|
|
Useful Links
|
|
</Heading>
|
|
|
|
<ul>
|
|
{_.map(linksData, (item, index) => (
|
|
<li>
|
|
<RouterLink to={item.url}>
|
|
{item.label}
|
|
</RouterLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Column>
|
|
</StyledWrap>
|
|
|
|
<StyledLink to="#" bgColor="#F3F6F4" isAccentColor={true} isNoBorder={true}>
|
|
View All Documentation
|
|
</StyledLink>
|
|
</DropdownWrap>
|
|
</>
|
|
);
|
|
|
|
const DropdownWrap = styled.div`
|
|
padding: 15px 30px 75px 15px;
|
|
`;
|
|
|
|
const StyledWrap = styled(Wrap)`
|
|
border-top: 1px solid #dadada;
|
|
padding-top: 20px;
|
|
margin-top: 30px;
|
|
`;
|
|
|
|
const StyledLink = styled(Link)`
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
`;
|