WIP dropdown menus

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>
+        <DropdownWrap>
+            <div>
+                <Heading size={14} 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>
+                <WrapGrid isCentered={false} isWrapped={true}>
+                    {_.map(introData, (item, index) => (
+                        <RouterLink to={item.url}>
+                            {item.label}
+                        </RouterLink>
+                    ))}
+                </WrapGrid>
+            </div>
 
-        <Wrap>
-            asdf
-        </Wrap>
+            <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;
 `;