aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/dropdowns
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/dropdowns')
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx180
-rw-r--r--packages/website/ts/@next/components/dropdowns/dropdown_products.tsx48
2 files changed, 228 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
new file mode 100644
index 000000000..96d88846b
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -0,0 +1,180 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/@next/components/button';
+import { Column, FlexWrap, WrapGrid } from 'ts/@next/components/newLayout';
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
+import { Heading } from 'ts/@next/components/text';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+interface Props {
+ theme: ThemeValuesInterface;
+}
+
+interface LinkConfig {
+ label: string;
+ url: string;
+ shouldOpenInNewTab?: boolean;
+}
+
+const introData: LinkConfig[] = [
+ {
+ label: 'Build a relayer',
+ url: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+ },
+ {
+ label: 'Develop on Ethereum',
+ url: `${WebsitePaths.Wiki}#Ethereum-Development`,
+ },
+ {
+ label: 'Make & take orders',
+ url: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+ },
+ {
+ label: 'Use networked liquidity',
+ url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+ },
+];
+
+const docsData: LinkConfig[] = [
+ {
+ label: '0x.js',
+ url: WebsitePaths.ZeroExJs,
+ },
+ {
+ label: '0x Connect',
+ url: WebsitePaths.Connect,
+ },
+ {
+ label: 'Smart Contract',
+ url: WebsitePaths.SmartContracts,
+ },
+];
+
+const linksData: LinkConfig[] = [
+ {
+ label: 'Wiki',
+ url: WebsitePaths.Wiki,
+ },
+ {
+ label: 'Github',
+ url: constants.URL_GITHUB_ORG,
+ shouldOpenInNewTab: true,
+ },
+ {
+ label: 'Protocol specification',
+ url: constants.URL_PROTOCOL_SPECIFICATION,
+ shouldOpenInNewTab: true,
+ },
+];
+
+export const DropdownDevelopers: React.FunctionComponent<Props> = withTheme((props: Props) => (
+ <>
+ <DropdownWrap>
+ <div>
+ <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+ Getting Started
+ </Heading>
+
+ <StyledGrid isCentered={false} isWrapped={true}>
+ {_.map(introData, (item, index) => (
+ <li>
+ <Link key={`introLink-${index}`} to={item.url}>
+ {item.label}
+ </Link>
+ </li>
+ ))}
+ </StyledGrid>
+ </div>
+
+ <StyledWrap>
+ <Column width="calc(100% - 15px)">
+ <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+ Popular Docs
+ </Heading>
+
+ <ul>
+ {_.map(docsData, (item, index) => (
+ <li key={`docsLink-${index}`}>
+ <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
+ {item.label}
+ </Link>
+ </li>
+ ))}
+ </ul>
+ </Column>
+
+ <Column width="calc(100% - 15px)">
+ <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+ Useful Links
+ </Heading>
+
+ <ul>
+ {_.map(linksData, (item, index) => (
+ <li key={`usefulLink-${index}`}>
+ <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
+ {item.label}
+ </Link>
+ </li>
+ ))}
+ </ul>
+ </Column>
+ </StyledWrap>
+
+ <StyledLink
+ to={WebsitePaths.Docs}
+ bgColor={props.theme.dropdownButtonBg}
+ isAccentColor={true}
+ isNoBorder={true}
+ >
+ View All Documentation
+ </StyledLink>
+ </DropdownWrap>
+ </>
+));
+
+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;
+`;
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..886cee44a
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -0,0 +1,48 @@
+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;
+ }
+`;