From d93c9c3bc9a8f4648441ff6b1af072230d6adf82 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Thu, 10 Apr 2025 14:52:04 -0400
Subject: [PATCH] update status create page to use Tab component

---
 .../Create/Components/Tabs/index.jsx          | 34 ++++++++-----------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
index da2da9acf..5ad27622d 100644
--- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
+++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
@@ -1,11 +1,13 @@
 // Components
 import { TabContext, TabList } from "@mui/lab";
 import { Box, Tab, useTheme } from "@mui/material";
+import TabListWrapper from "../../../../../Components/Tab";
 import Settings from "./Settings";
 import Content from "./Content";
 
 // Utils
 import PropTypes from "prop-types";
+import TabListWrapper from "../../../../../Components/Tab";
 
 const Tabs = ({
 	isCreate,
@@ -26,28 +28,20 @@ const Tabs = ({
 	const theme = useTheme();
 	return (
 		<TabContext value={TAB_LIST[tab]}>
-			<Box
-				sx={{
-					borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
-					"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+			<TabListWrapper
+				onChange={(_, selected) => {
+					setTab(TAB_LIST.indexOf(selected));
 				}}
+				aria-label="status page tabs"
 			>
-				<TabList
-					onChange={(_, tab) => {
-						setTab(TAB_LIST.indexOf(tab));
-					}}
-				>
-					{TAB_LIST.map((tab, idx) => {
-						return (
-							<Tab
-								key={tab}
-								label={TAB_LIST[idx]}
-								value={TAB_LIST[idx]}
-							/>
-						);
-					})}
-				</TabList>
-			</Box>
+				{TAB_LIST.map((tabLabel, idx) => (
+					<Tab
+						key={tabLabel}
+						label={tabLabel}
+						value={tabLabel}
+					/>
+				))}
+			</TabListWrapper>
 			{tab === 0 ? (
 				<Settings
 					tabValue={TAB_LIST[0]}