diff options
Diffstat (limited to 'packages/website/ts/@next/components/dropdowns/dropdown_products.tsx')
-rw-r--r-- | packages/website/ts/@next/components/dropdowns/dropdown_products.tsx | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx new file mode 100644 index 000000000..1677d3c08 --- /dev/null +++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx @@ -0,0 +1,58 @@ +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'; +import { WebsitePaths } from 'ts/types'; + +const navData = [ + { + title: '0x Instant', + description: 'Simple crypto purchasing', + url: WebsitePaths.Instant, + }, + { + title: '0x Launch kit', + description: 'Build on the 0x protocol', + url: WebsitePaths.LaunchKit, + }, +]; + +export const DropdownProducts: React.FunctionComponent<{}> = () => ( + <List> + {_.map(navData, (item, index) => ( + <li key={`productLink-${index}`}> + <Link to={item.url}> + <Heading + asElement="h3" + color="inherit" + isNoMargin={true} + size="small" + > + {item.title} + </Heading> + + {item.description && + <Paragraph + color="inherit" + isNoMargin={true} + size="small" + isMuted={0.5} + > + {item.description} + </Paragraph> + } + </Link> + </li> + ))} + </List> +); + +const List = styled.ul` + a { + padding: 15px 30px; + display: block; + color: inherit; + } +`; |