Content pages

server/pages/integrations/Menu.js

@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { map, groupBy } from 'lodash';
+
+export default function IntegrationMenu({ integrations }: { integrations: * }) {
+  const categories = groupBy(integrations, i => i.category);
+
+  return (
+    <nav>
+      {map(categories, (integrations, category) => (
+        <React.Fragment key={category}>
+          <h3>{category}</h3>
+          <List>
+            {integrations.map(i => (
+              <li key={i.slug}>
+                <MenuItem href={`/integrations/${i.slug}`}>
+                  <Logo src={`/images/${i.slug}.png`} alt={i.name} />
+                  <span>{i.name}</span>
+                </MenuItem>
+              </li>
+            ))}
+          </List>
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+}
+
+const MenuItem = styled.a`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  color: ${props => props.theme.text};
+`;
+
+const Logo = styled.img`
+  user-select: none;
+  height: 18px;
+  border-radius: 2px;
+  margin-right: 8px;
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;