Merge pull request #2050 from bluewave-labs/refactor/fe/tabs

Unify tab styles with CustomTabList component

src/Components/Tab/index.jsx

@@ -0,0 +1,36 @@
+import { Box, useTheme } from "@mui/material";
+import { TabList } from "@mui/lab";
+import PropTypes from "prop-types";
+
+/**
+ * CustomTabList component
+ * @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();
+
+	return (
+		<Box
+			sx={{
+				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+				"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+			}}
+		>
+			<TabList value={value} onChange={onChange} {...props}>
+				{children}
+			</TabList>
+		</Box>
+	);
+};
+
+CustomTabList.propTypes = {
+	value: PropTypes.string,
+	onChange: PropTypes.func,
+	children: PropTypes.node,
+};
+
+export default CustomTabList;