tabs

hack4impact-upenn · Feb 25, 2025 · d9f990f · d9f990f
1 parent 4f3c0ed
commit d9f990f
Showing 1 changed file with 56 additions and 38 deletions.
diff --git a/client/src/AdminDashboard/AdminDashboardPage.tsx b/client/src/AdminDashboard/AdminDashboardPage.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Typography, AppBar, Box } from '@mui/material';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import ScreenGrid from '../components/ScreenGrid';
 import QuestionTable from './Tables/QuestionTable';
 import ResourceTable from './Tables/ResourceTable';
@@ -14,6 +16,8 @@ import UserTable from './Tables/UserTable';
  * Admin to delete users from admin and promote users to admin.
  */
 function AdminDashboardPage() {
+  const [value, setValue] = React.useState('questions');
+
   // determine if user is an admin
   const self = useAppSelector(selectUser);
 
@@ -45,49 +49,63 @@ function AdminDashboardPage() {
           }}
         >
           <Typography variant="h2">Welcome to the Admin Dashboard</Typography>
-          <div
-            style={{
-              marginTop: '20px',
-              marginBottom: '40px',
-            }}
-          >
-            <Typography variant="h5" marginBottom="10px">
-              Questions
-            </Typography>
-            <div style={{ width: '100%', height: '60vh' }}>
-              <QuestionTable />
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs value={value} onChange={(_, newValue) => setValue(newValue)}>
+              <Tab label="Questions" value="questions" />
+              <Tab label="Resources" value="resources" />
+              <Tab label="Definitions" value="definitions" />
+              {self.admin && <Tab label="Users" value="users" />}
+            </Tabs>
+          </Box>
+          {value === 'questions' && (
+            <div
+              style={{
+                marginTop: '30px',
+                marginBottom: '40px',
+              }}
+            >
+              <Typography variant="h5" marginBottom="10px">
+                Questions
+              </Typography>
+              <div style={{ width: '100%', height: '60vh' }}>
+                <QuestionTable />
+              </div>
             </div>
-          </div>
-          <div
-            style={{
-              marginTop: '40px',
-              marginBottom: '40px',
-            }}
-          >
-            <Typography variant="h5" marginBottom="10px">
-              Resources
-            </Typography>
-            <div style={{ width: '100%', height: '60vh' }}>
-              <ResourceTable />
+          )}
+          {value === 'resources' && (
+            <div
+              style={{
+                marginTop: '30px',
+                marginBottom: '40px',
+              }}
+            >
+              <Typography variant="h5" marginBottom="10px">
+                Resources
+              </Typography>
+              <div style={{ width: '100%', height: '60vh' }}>
+                <ResourceTable />
+              </div>
             </div>
-          </div>
-          <div
-            style={{
-              marginTop: '40px',
-              marginBottom: '40px',
-            }}
-          >
-            <Typography variant="h5" marginBottom="10px">
-              Definitions
-            </Typography>
-            <div style={{ width: '100%', height: '60vh' }}>
-              <DefinitionTable />
+          )}
+          {value === 'definitions' && (
+            <div
+              style={{
+                marginTop: '30px',
+                marginBottom: '40px',
+              }}
+            >
+              <Typography variant="h5" marginBottom="10px">
+                Definitions
+              </Typography>
+              <div style={{ width: '100%', height: '60vh' }}>
+                <DefinitionTable />
+              </div>
             </div>
-          </div>
-          {self.admin && (
+          )}
+          {value === 'users' && self.admin && (
             <div
               style={{
-                marginTop: '40px',
+                marginTop: '30px',
                 marginBottom: '40px',
               }}
             >