Loop through products dropdown data

1 files changed, 30 insertions, 24 deletions

diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 366c00a1e..83d554f03 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,34 +1,40 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
+const navData = [
+        {
+            title: '0x Instant',
+            description: 'Simple crypto purchasing',
+            url: '#',
+        },
+        {
+            title: '0x Launch kit',
+            description: 'Build on the 0x protocol',
+            url: '#',
+        },
+        {
+            title: 'Extensions',
+            url: '#',
+        },
+];
+
 export const DropdownProducts = () => (
     <List>
-        <li>
-            <Heading color="#000000" isNoMargin={true}>
-                0x Instant
-            </Heading>
-
-            <Paragraph color="#5d5d5d" isNoMargin={true}>
-                Simple crypto purchasing
-            </Paragraph>
-        </li>
-
-        <li>
-            <Heading color="#000000" isNoMargin={true}>
-                0x Launch Kit
-            </Heading>
-
-            <Paragraph color="#5d5d5d" isNoMargin={true}>
-                Build on the 0x protocol
-            </Paragraph>
-        </li>
+        {_.map(navData, (item, index) => (
+            <li>
+                <Heading color="#000000" isNoMargin={true} size="small">
+                    {item.title}
+                </Heading>
 
-        <li>
-            <Heading color="#000000" isNoMargin={true}>
-                Extensions
-            </Heading>
-        </li>
+                {item.description &&
+                    <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
+                        {item.description}
+                    </Paragraph>
+                }
+            </li>
+        ))}
     </List>
 );