SW-6812: Add Deliverables tab to Project Profile in Console

src/components/Tabs/index.tsx

@@ -1,57 +1,62 @@
-import React, { useEffect, useState } from 'react';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Tab as MuiTab, useTheme } from '@mui/material';
+import { Box, Tab as MuiTab, SxProps, Theme, useTheme } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+
 import { useDeviceInfo } from '../../utils';
 import Icon from '../Icon/Icon';
 import { IconName } from '../Icon/icons';
 
 export type Tab = {
+  children: React.ReactNode;
+  disabled?: boolean;
   icon?: IconName;
   id: string;
   label: string;
-  children: React.ReactNode;
-  disabled?: boolean;
 };
 
 export type TabsProps = {
-  tabs: Tab[];
-  onTabChange?: (tab: string) => void;
   activeTab?: string;
+  onTabChange?: (tab: string) => void;
+  tabs: Tab[];
+  tabStyle?: SxProps<Theme>;
 };
 
-const Tabs = ({ tabs, onTabChange, activeTab }: TabsProps): JSX.Element => {
+const Tabs = ({ activeTab, onTabChange, tabs, tabStyle }: TabsProps): JSX.Element => {
   const [selectedTab, setSelectedTab] = useState<string>(activeTab ?? tabs[0]?.id ?? '');
   const theme = useTheme();
   const { isMobile } = useDeviceInfo();
 
-  const tabStyles = {
-    color: theme.palette.TwClrTxtSecondary as string,
-    fontSize: '16px',
-    fontWeight: 600,
-    lineHeight: '24px',
-    padding: theme.spacing(1, 2),
-    minHeight: theme.spacing(4.5),
-    textTransform: 'capitalize',
-    '&:hover': {
-      backgroundColor: theme.palette.TwClrBgHover as string,
-    },
-    '&.Mui-selected': {
-      color: theme.palette.TwClrTxtBrand as string,
-    },
-    '&.MuiTab-labelIcon': {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
+  const tabStyles = [
+    {
+      color: theme.palette.TwClrTxtSecondary as string,
+      fontSize: '16px',
+      fontWeight: 600,
+      lineHeight: '24px',
+      minHeight: theme.spacing(4.5),
+      padding: theme.spacing(1, 2),
+      textTransform: 'capitalize',
+      '&:hover': {
+        backgroundColor: theme.palette.TwClrBgHover as string,
+      },
+      '&.Mui-selected': {
+        color: theme.palette.TwClrTxtBrand as string,
+      },
+      '&.MuiTab-labelIcon': {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+      },
+      '& .MuiTab-iconWrapper': {
+        fill: theme.palette.TwClrIcnSecondary as string,
+        marginBottom: 0,
+        marginRight: theme.spacing(1),
+      },
+      '&.Mui-selected .MuiTab-iconWrapper': {
+        fill: theme.palette.TwClrIcnBrand as string,
+      },
     },
-    '& .MuiTab-iconWrapper': {
-      fill: theme.palette.TwClrIcnSecondary as string,
-      marginBottom: 0,
-      marginRight: theme.spacing(1),
-    },
-    '&.Mui-selected .MuiTab-iconWrapper': {
-      fill: theme.palette.TwClrIcnBrand as string,
-    },
-  };
+    ...(Array.isArray(tabStyle) ? tabStyle : [tabStyle]),
+  ];
 
   const tabHeaderProps = {
     borderBottom: 1,
@@ -82,30 +87,30 @@ const Tabs = ({ tabs, onTabChange, activeTab }: TabsProps): JSX.Element => {
       <TabContext value={selectedTab}>
         <Box sx={tabHeaderProps}>
           <TabList
-            variant='scrollable'
-            sx={{ minHeight: theme.spacing(4.5) }}
             onChange={(unused, value: string) => setTab(value)}
+            sx={{ minHeight: theme.spacing(4.5) }}
             TabIndicatorProps={{
               style: {
                 background: theme.palette.TwClrBgBrand,
                 height: '4px',
               },
             }}
+            variant='scrollable'
           >
             {tabs.map((tab, index) => (
               <MuiTab
+                disabled={tab.disabled}
                 icon={tab.icon ? <Icon name={tab.icon} /> : undefined}
+                key={index}
                 label={tab.label}
-                value={tab.id}
                 sx={tabStyles}
-                key={index}
-                disabled={tab.disabled}
+                value={tab.id}
               />
             ))}
           </TabList>
         </Box>
         {tabs.map((tab, index) => (
-          <TabPanel value={tab.id} key={index} sx={tabPanelStyles}>
+          <TabPanel key={index} sx={tabPanelStyles} value={tab.id}>
             {tab.children}
           </TabPanel>
         ))}