// In customTab/CustomTab.tsx

​

import React, { ReactNode } from "react";

import { Tab, Tabs, Box } from "@mui/material";

import { TabPanel, TabContext } from "@mui/lab";

​

interface CustomTabProps {

  tabs: {

    label: string;

    Component: ReactNode;

  }[];

  tabsStyles?: React.CSSProperties;

}

​

const CustomTab: React.FC<CustomTabProps> = ({ tabs, tabsStyles }) => {

  const [value, setValue] = React.useState("0");

​

  const handleChange = (event: React.ChangeEvent<{}>, newValue: string) => {

    setValue(newValue);

  };

​

  return (

    <TabContext value={value}>

      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>

        <Tabs

          value={value}

          onChange={handleChange}

          sx={{

            ...tabsStyles, // Apply additional styles to Tabs

          }}

        >

          {tabs.map(({ label }, i) => (

            <Tab label={label} key={i} value={i.toString()} />

          ))}

        </Tabs>

​

        {tabs.map((tab, i) => (

          <TabPanel value={i.toString()} key={i}>

            {tab.Component}

          </TabPanel>

        ))}

      </Box>

    </TabContext>

  );

};

​

export default CustomTab;