diff options
Diffstat (limited to 'packages/website/ts/@next/components/dropdowns')
| -rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx | 141 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_products.tsx | 24 |
2 files changed, 132 insertions, 33 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx index a9cfed538..d87540511 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx @@ -1,37 +1,132 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {Link} from 'react-router-dom'; -import {WrapGrid} from 'ts/@next/components/layout'; +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 = () => ( <> - <Wrap> - <Heading size="small" color="#5d5d5d"> - Getting Started - </Heading> - - <WrapGrid isCentered={false} isWrapped={true}> - <Link to="#">Build a relayer</Link> - <Link to="#">Develop on Ethereum</Link> - <Link to="#">Make & take orders</Link> - <Link to="#">Use networked liquidity</Link> - </WrapGrid> - </Wrap> - - <Wrap> - asdf - </Wrap> + <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 Wrap = styled.div` - padding: 15px 30px; +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: calc(50% - 15px); - flex-shrink: 0; - color: #000000; + width: 100%; + position: absolute; + bottom: 0; + left: 0; `; diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx index 83d554f03..0271daf84 100644 --- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; +import {Link} from 'react-router-dom'; import styled from 'styled-components'; import {Heading, Paragraph} from 'ts/@next/components/text'; @@ -7,7 +8,7 @@ const navData = [ { title: '0x Instant', description: 'Simple crypto purchasing', - url: '#', + url: '/next/0x-instant', }, { title: '0x Launch kit', @@ -24,22 +25,25 @@ export const DropdownProducts = () => ( <List> {_.map(navData, (item, index) => ( <li> - <Heading color="#000000" isNoMargin={true} size="small"> - {item.title} - </Heading> + <Link to={item.url}> + <Heading color="#000000" isNoMargin={true} size="small"> + {item.title} + </Heading> - {item.description && - <Paragraph color="#5d5d5d" isNoMargin={true} size="small"> - {item.description} - </Paragraph> - } + {item.description && + <Paragraph color="#5d5d5d" isNoMargin={true} size="small"> + {item.description} + </Paragraph> + } + </Link> </li> ))} </List> ); const List = styled.ul` - li { + a { padding: 15px 30px; + display: block; } `; |