1 files changed, 78 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/admin/Admin.tsx b/Timeline/ClientApp/src/app/admin/Admin.tsx
new file mode 100644
index 00000000..9e7d592f
--- /dev/null
+++ b/Timeline/ClientApp/src/app/admin/Admin.tsx
@@ -0,0 +1,78 @@
+import React, { Fragment } from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+import {
+  Redirect,
+  Route,
+  Switch,
+  useRouteMatch,
+  useHistory
+} from 'react-router';
+import classnames from 'classnames';
+
+import AppBar from '../common/AppBar';
+import UserAdmin from './UserAdmin';
+
+import { UserWithToken } from '../data/user';
+
+interface AdminProps {
+  user: UserWithToken;
+}
+
+const Admin: React.FC<AdminProps> = props => {
+  const match = useRouteMatch();
+  const history = useHistory();
+  type TabNames = 'users' | 'more';
+
+  const tabName = history.location.pathname.replace(match.path + '/', '');
+
+  function toggle(newTab: TabNames): void {
+    history.push(`${match.url}/${newTab}`);
+  }
+
+  const createRoute = (
+    name: string,
+    body: React.ReactNode
+  ): React.ReactNode => {
+    return (
+      <Route path={`${match.path}/${name}`}>
+        <AppBar />
+        <div style={{ height: 56 }} className="flex-fix-length" />
+        <Nav tabs>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: tabName === 'users' })}
+              onClick={() => {
+                toggle('users');
+              }}
+            >
+              Users
+            </NavLink>
+          </NavItem>
+          <NavItem>
+            <NavLink
+              className={classnames({ active: tabName === 'more' })}
+              onClick={() => {
+                toggle('more');
+              }}
+            >
+              More
+            </NavLink>
+          </NavItem>
+        </Nav>
+        {body}
+      </Route>
+    );
+  };
+
+  return (
+    <Fragment>
+      <Switch>
+        <Redirect from={match.path} to={`${match.path}/users`} exact />
+        {createRoute('users', <UserAdmin user={props.user} />)}
+        {createRoute('more', <div>More Page Works</div>)}
+      </Switch>
+    </Fragment>
+  );
+};
+
+export default Admin;