From b300c1b8300bba1cf023f0e1d510b39bc6ee30f0 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Thu, 10 Apr 2025 17:51:14 -0400
Subject: [PATCH] add json doc for customtablist component

---
 src/Components/Tab/index.jsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/Components/Tab/index.jsx b/src/Components/Tab/index.jsx
index c2267de3d..6edfc8340 100644
--- a/src/Components/Tab/index.jsx
+++ b/src/Components/Tab/index.jsx
@@ -2,6 +2,26 @@ import { Box, useTheme } from "@mui/material";
 import { TabList } from "@mui/lab";
 import PropTypes from "prop-types";
 
+/**
+ * CustomTabList component
+ *
+ * Wraps MUI's TabList inside a Box to apply consistent styling, specifically a bottom border,
+ * while avoiding the default top, left, and right borders applied through global MuiTabs overrides.
+ * This is used to match our tab layout across pages like Account and StatusPage.
+ *
+ * @component
+ * @example
+ * <CustomTabList value={value} onChange={handleChange}>
+ *   <Tab label="General" value="general" />
+ *   <Tab label="Settings" value="settings" />
+ * </CustomTabList>
+ *
+ * @param {string} value - The currently selected tab's value.
+ * @param {function} onChange - Callback when a different tab is selected.
+ * @param {React.ReactNode} children - Tab components to render inside the TabList.
+ * @param {object} props - Additional props passed to the TabList component.
+ */
+
 const CustomTabList = ({ value, onChange, children, ...props }) => {
 	const theme = useTheme();