Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3481 | Rev 3500 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3481 Rev 3494
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React from 'react';
2 
import { Tabs, Tab, Box } from '@mui/material';
 2 
import { Tabs as MuiTabs, Tab } from '@mui/material';
3 
 
 - 
 
4 
function TabPanel(props) {
 - 
 
5 
  const { children, value, index, ...other } = props;
 - 
 
Línea -... Línea 3...
- 
 
 3 
 
6 
 
 4 
export function Tabs({ children, value, onChange }) {
7 
  return (
 5 
  return (
8 
    <div
 6 
    <MuiTabs
9 
      role='tabpanel'
 7 
      value={value}
- 
 
 8 
      onChange={onChange}
- 
 
 9 
      sx={{
- 
 
 10 
        mb: 2,
10 
      hidden={value !== index}
 11 
        minHeight: 'auto',
11 
      id={`simple-tabpanel-${index}`}
 12 
        '& .MuiTabs-indicator': {
12 
      aria-labelledby={`simple-tab-${index}`}
 13 
          backgroundColor: 'var(--font-color)'
- 
 
 14 
        }
13 
      {...other}
 15 
      }}
14 
    >
 16 
    >
15 
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
 17 
      {children}
16 
    </div>
 18 
    </MuiTabs>
17 
  );
 19 
  );
Línea 18... Línea 20...
18 
}
 20 
}
19 
 
 - 
 
20 
function TabsAdapter({ tabs }) {
 - 
 
21 
  const [value, setValue] = useState(0);
 - 
 
22 
 
 - 
 
23 
  const handleChange = (event, newValue) => {
 - 
 
24 
    setValue(newValue);
 - 
 
25 
  };
 21 
 
26 
 
 22 
function TabItem({ label, value, ...props }) {
27 
  return (
 23 
  return (
28 
    <Box sx={{ width: '100%' }}>
 24 
    <Tab
29 
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
 25 
      disableRipple
30 
        <Tabs value={value} onChange={handleChange}>
 - 
 
31 
          {tabs.map((tab, index) => (
 26 
      label={label}
32 
            <Tab key={index} label={tab.label} id={`simple-tab-${index}`} />
 27 
      value={value}
33 
          ))}
 28 
      sx={{
34 
        </Tabs>
 29 
        flexGrow: 1,
- 
 
 30 
        color: 'var(--subtitle-color)',
35 
      </Box>
 31 
        fontWeight: 'bold !important',
36 
      {tabs.map((tab, index) => (
 32 
        padding: { xs: '0.5rem 5px !important', md: '0.5rem 1rem !important' },
- 
 
 33 
        minHeight: 'auto !important',
37 
        <TabPanel key={index} value={value} index={index}>
 34 
        '&.Mui-selected': {
38 
          {tab.component}
 35 
          color: 'var(--font-color) !important'
- 
 
 36 
        }
39 
        </TabPanel>
 37 
      }}
40 
      ))}
 38 
      {...props}
41 
    </Box>
 39 
    />
Línea 42... Línea 40...
42 
  );
 40 
  );