First iteration of admin

src/core/client/admin/components/App.tsx

@@ -1,6 +1,13 @@
 import React, { StatelessComponent } from "react";
+import { HorizontalGutter } from "talk-ui/components";
+import NavigationContainer from "../containers/NavigationContainer";
 
-export type View = "MODERATE" | "%future added value";
+export type View =
+  | "MODERATE"
+  | "COMMUNITY"
+  | "STORIES"
+  | "CONFIGURE"
+  | "%future added value";
 
 export interface AppProps {
   view: View;
@@ -9,14 +16,23 @@ export interface AppProps {
 const renderView = (view: View) => {
   switch (view) {
     case "MODERATE":
-      return <div>Moderate</div>;
+      return <div>MODERATE</div>;
+    case "COMMUNITY":
+      return <div>COMMUNITY</div>;
+    case "STORIES":
+      return <div>STORIES</div>;
+    case "CONFIGURE":
+      return <div>CONFIGURE</div>;
     default:
       throw new Error(`Unknown view ${view}`);
   }
 };
 
 const App: StatelessComponent<AppProps> = ({ view }) => (
-  <div>{renderView(view)}</div>
+  <HorizontalGutter>
+    <NavigationContainer />
+    {renderView(view)}
+  </HorizontalGutter>
 );
 
 export default App;

src/core/client/admin/components/Navigation.tsx

@@ -0,0 +1,26 @@
+import React, { StatelessComponent } from "react";
+import { Button, Flex, Typography } from "talk-ui/components";
+
+export interface AppProps {
+  goToModerate: () => void;
+  goToCommunity: () => void;
+  goToStories: () => void;
+  goToConfigure: () => void;
+}
+
+const Navigation: StatelessComponent<AppProps> = ({
+  goToModerate,
+  goToCommunity,
+  goToStories,
+  goToConfigure,
+}) => (
+  <Flex itemGutter="double">
+    <Typography variant="heading1">Talk</Typography>
+    <Button onClick={goToModerate}>Moderate</Button>
+    <Button onClick={goToCommunity}>Community</Button>
+    <Button onClick={goToStories}>Stories</Button>
+    <Button onClick={goToConfigure}>Configure</Button>
+  </Flex>
+);
+
+export default Navigation;