Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

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

function TabPanel(props) {

  const { children, value, index, ...other } = props;

  return (

    <div

      role='tabpanel'

      hidden={value !== index}

      id={`simple-tabpanel-${index}`}

      aria-labelledby={`simple-tab-${index}`}

      {...other}

    >

      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}

    </div>

  );

}

function TabsAdapter({ tabs }) {

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

  const handleChange = (event, newValue) => {

    setValue(newValue);

  };

  return (

    <Box sx={{ width: '100%' }}>

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

        <Tabs value={value} onChange={handleChange}>

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

            <Tab key={index} label={tab.label} id={`simple-tab-${index}`} />

          ))}

        </Tabs>

      </Box>

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

        <TabPanel key={index} value={value} index={index}>

          {tab.component}

        </TabPanel>

      ))}

    </Box>

  );

}

export default TabsAdapter;