1 files changed, 78 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/views/admin/Admin.tsx b/Timeline/ClientApp/src/app/views/admin/Admin.tsx
new file mode 100644
index 00000000..51dc5a3c
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/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 { UserWithToken } from "@/services/user";
+
+import UserAdmin from "./UserAdmin";
+
+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;