Routing, Navigation, Styles

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

@@ -0,0 +1,4 @@
+.root {
+  width: 1080px;
+  margin: 0 auto;
+}

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

@@ -1,12 +1,15 @@
 import React, { StatelessComponent } from "react";
 import { HorizontalGutter } from "talk-ui/components";
-import NavigationContainer from "../containers/NavigationContainer";
+import styles from "./App.css";
+import Navigation from "./Navigation";
 
 const App: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>
-    <NavigationContainer />
-    {children}
-  </HorizontalGutter>
+  <div className={styles.root}>
+    <HorizontalGutter>
+      <Navigation />
+      {children}
+    </HorizontalGutter>
+  </div>
 );
 
 export default App;

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

@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Community: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Community</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Community</Typography>
+  </HorizontalGutter>
 );
 
 export default Community;

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

@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Configure: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Configure</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Configure</Typography>
+  </HorizontalGutter>
 );
 
 export default Configure;

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

@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Moderate: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Moderate</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Moderate</Typography>
+  </HorizontalGutter>
 );
 
 export default Moderate;

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

@@ -0,0 +1,7 @@
+.link {
+  text-decoration: none;
+}
+
+.active {
+  border-bottom: 3px solid var(--palette-primary-main);
+}

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

@@ -1,25 +1,39 @@
+import { Link } from "found";
 import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
+import styles from "./Navigation.css";
 
-export interface AppProps {
-  goToModerate: () => void;
-  goToCommunity: () => void;
-  goToStories: () => void;
-  goToConfigure: () => void;
-}
-
-const Navigation: StatelessComponent<AppProps> = ({
-  goToModerate,
-  goToCommunity,
-  goToStories,
-  goToConfigure,
-}) => (
+const Navigation: StatelessComponent = () => (
   <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>
+    <Link
+      to="/admin/moderate"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Moderate</Button>
+    </Link>
+    <Link
+      to="/admin/community"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Community</Button>
+    </Link>
+    <Link
+      to="/admin/stories"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Stories</Button>
+    </Link>
+    <Link
+      to="/admin/configure"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Configure</Button>
+    </Link>
   </Flex>
 );
 

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

@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Stories: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Stories</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Stories</Typography>
+  </HorizontalGutter>
 );
 
 export default Stories;

src/core/client/admin/containers/NavigationContainer.tsx

@@ -1,26 +0,0 @@
-import { Router, withRouter } from "found";
-import React, { Component } from "react";
-import Navigation from "../components/Navigation";
-
-interface NavigationContainerProps {
-  router: Router;
-}
-
-class NavigationContainer extends Component<NavigationContainerProps> {
-  private goToModerate = () => this.props.router.replace("/admin/moderate");
-  private goToCommunity = () => this.props.router.replace("/admin/community");
-  private goToStories = () => this.props.router.replace("/admin/stories");
-  private goToConfigure = () => this.props.router.replace("/admin/configures");
-  public render() {
-    return (
-      <Navigation
-        goToModerate={this.goToModerate}
-        goToCommunity={this.goToCommunity}
-        goToStories={this.goToStories}
-        goToConfigure={this.goToConfigure}
-      />
-    );
-  }
-}
-
-export default withRouter(NavigationContainer);