Members

components/Members.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+
+import styled from "react-emotion";
+import { css } from "emotion";
+import Section from "./Section";
+import memberData from "../lib/members.json";
+
+const Category = ({
+  header,
+  members,
+  className
+}: {
+  header: string;
+  members: string[];
+  className?: string;
+}) => (
+  <div className={className}>
+    <h4>{header}</h4>
+    <ul>
+      {members.map(member => {
+        const data = memberData.members[member];
+        return (
+          <li>
+            <a href={(data && data.url) || "#"} target="_blank">
+              {member}
+            </a>
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+);
+
+const StyledCategory = styled(Category)`
+  h4 {
+    color: #000d45;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 34px;
+    :after {
+      display: block;
+      content: "";
+      margin-top: 12px;
+      height: 1px;
+      width: 33px;
+      border-bottom: 5px solid #0734ff;
+    }
+    margin-bottom: 27px;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  a {
+    text-decoration: none;
+    color: #0734ff;
+    font-size: 20px;
+    line-height: 24px;
+    :hover {
+      color: #000d45;
+    }
+  }
+  margin-bottom: 67px;
+`;
+
+const CategoryColumn = ({ categories }: { categories: any[] }) => (
+  <div
+    className={css`
+      flex: 50%;
+    `}
+  >
+    {categories.map(([header, members]) => (
+      <StyledCategory header={header} members={members as string[]} />
+    ))}
+  </div>
+);
+
+const CategoryColumns = styled.div`
+  display: flex;
+`;
+
+const Members = ({ className }: { className?: string }) => {
+  const categories = Object.entries(memberData.categories).sort(
+    (a, b) => (a < b ? -1 : 1)
+  );
+  return (
+    <Section className={className}>
+      <h2>Members</h2>
+      <CategoryColumns>
+        <CategoryColumn categories={categories.slice(0, 5)} />
+        <CategoryColumn categories={categories.slice(5)} />
+      </CategoryColumns>
+    </Section>
+  );
+};
+
+export default styled(Members)``;

lib/members.json

@@ -0,0 +1,56 @@
+{
+  "categories": {
+    "Apps": ["Coinbase Wallet"],
+    "Baskets": ["Set"],
+    "Derivatives": ["dY/dX", "Market Protocol", "bZx"],
+    "Exchanges": ["Kyber Network", "Market Protocol"],
+    "Insurance": ["CDx", "Market Protocol"],
+    "Loans": ["Dharma"],
+    "Payments": ["8x Protocol"],
+    "Real World Assets": ["Centrifuge"],
+    "Securities": ["Abacus"],
+    "Stablecoins": ["Maker"],
+    "Scaling": ["Connext"]
+  },
+  "members": {
+    "Abacus": {
+      "url": "https://abacusprotocol.com"
+    },
+    "Coinbase Wallet": {
+      "url": "https://wallet.coinbase.com/"
+    },
+    "Set": {
+      "url": "https://setprotocol.com/"
+    },
+    "dY/dX": {
+      "url": "https://dydx.exchange/"
+    },
+    "Market Protocol": {
+      "url": "https://marketprotocol.io/"
+    },
+    "CDx": {
+      "url": "https://cdxproject.com/"
+    },
+    "Dharma": {
+      "url": "https://dharma.io/"
+    },
+    "8x Protocol": {
+      "url": "https://8xprotocol.com/"
+    },
+    "Connext": {
+      "url": "https://connext.network/"
+    },
+    "bZx": {
+      "url": "https://b0x.network/"
+    },
+    "Kyber Network": {
+      "url": "https://kyber.network/"
+    },
+    "Maker": {
+      "url": "https://makerdao.com/"
+    },
+    "Centrifuge": {
+      "url": "https://www.centrifuge.io/"
+    }
+  }
+}

pages/index.tsx

@@ -6,6 +6,7 @@ import styled from "react-emotion";
 import Header from "../components/Header";
 import Description from "../components/Description";
 import Events from "../components/Events";
+import Members from "../components/Members";
 
 injectGlobal`
 ${emotionNormalize}
@@ -71,5 +72,6 @@ export default () => (
     <Header />
     <Description />
     <Events />
+    <Members />
   </>
 );