1 files changed, 76 insertions, 0 deletions
diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx
new file mode 100644
index 000000000..e79bc920b
--- /dev/null
+++ b/packages/website/ts/pages/jobs/open_positions.tsx
@@ -0,0 +1,76 @@
+import * as _ from 'lodash';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
+import * as React from 'react';
+
+const POSITIONS = [
+    {
+        name: 'Community Director',
+        department: 'Marketing',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Data Scientist / Data Engineer',
+        department: 'Engineering',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Executive Assitant / Office Manager',
+        department: 'Operations',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Research Fellow - Economics / Governance',
+        department: 'Engineering',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Software Engineer - Blockchain',
+        department: 'Engineer',
+        office: 'Remote / San Francisco',
+    },
+    {
+        name: 'Software Engineer - Full-stack',
+        department: 'Marketing',
+        office: 'Remote / San Francisco',
+    },
+];
+
+export const OpenPositions = () => {
+    const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 };
+    return (
+        <div className="py4" style={{ paddingLeft: 200, paddingRight: 200 }}>
+            <Table selectable={false}>
+                <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+                    <TableRow>
+                        <TableHeaderColumn colSpan={6} style={labelStyle}>
+                            Position
+                        </TableHeaderColumn>
+                        <TableHeaderColumn colSpan={3} style={labelStyle}>
+                            Department
+                        </TableHeaderColumn>
+                        <TableHeaderColumn colSpan={3} style={labelStyle}>
+                            Office
+                        </TableHeaderColumn>
+                    </TableRow>
+                </TableHeader>
+                <TableBody displayRowCheckbox={false} showRowHover={true}>
+                    {_.map(POSITIONS, position => {
+                        return (
+                            <TableRow hoverable={true} displayBorder={false} style={{ height: 100, border: 2 }}>
+                                <TableRowColumn colSpan={6} style={labelStyle}>
+                                    {position.name}
+                                </TableRowColumn>
+                                <TableRowColumn colSpan={3} style={labelStyle}>
+                                    {position.department}
+                                </TableRowColumn>
+                                <TableRowColumn colSpan={3} style={labelStyle}>
+                                    {position.office}
+                                </TableRowColumn>
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </div>
+    );
+};