005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
114 lines
2.7 KiB
JavaScript
114 lines
2.7 KiB
JavaScript
import * as React from 'react';
|
|
import { styled } from '@mui/material/styles';
|
|
import Tabs from '@mui/material/Tabs';
|
|
import Tab from '@mui/material/Tab';
|
|
import Box from '@mui/material/Box';
|
|
|
|
const AntTabs = styled(Tabs)({
|
|
borderBottom: '1px solid #e8e8e8',
|
|
'& .MuiTabs-indicator': {
|
|
backgroundColor: '#1890ff',
|
|
},
|
|
});
|
|
|
|
const AntTab = styled((props) => <Tab disableRipple {...props} />)(({ theme }) => ({
|
|
textTransform: 'none',
|
|
minWidth: 0,
|
|
[theme.breakpoints.up('sm')]: {
|
|
minWidth: 0,
|
|
},
|
|
fontWeight: theme.typography.fontWeightRegular,
|
|
marginRight: theme.spacing(1),
|
|
color: 'rgba(0, 0, 0, 0.85)',
|
|
fontFamily: [
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'"Segoe UI"',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'Arial',
|
|
'sans-serif',
|
|
'"Apple Color Emoji"',
|
|
'"Segoe UI Emoji"',
|
|
'"Segoe UI Symbol"',
|
|
].join(','),
|
|
'&:hover': {
|
|
color: '#40a9ff',
|
|
opacity: 1,
|
|
},
|
|
'&.Mui-selected': {
|
|
color: '#1890ff',
|
|
fontWeight: theme.typography.fontWeightMedium,
|
|
},
|
|
'&.Mui-focusVisible': {
|
|
backgroundColor: '#d1eaff',
|
|
},
|
|
}));
|
|
|
|
const StyledTabs = styled((props) => (
|
|
<Tabs
|
|
{...props}
|
|
TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
|
|
/>
|
|
))({
|
|
'& .MuiTabs-indicator': {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
'& .MuiTabs-indicatorSpan': {
|
|
maxWidth: 40,
|
|
width: '100%',
|
|
backgroundColor: '#635ee7',
|
|
},
|
|
});
|
|
|
|
const StyledTab = styled((props) => <Tab disableRipple {...props} />)(
|
|
({ theme }) => ({
|
|
textTransform: 'none',
|
|
fontWeight: theme.typography.fontWeightRegular,
|
|
fontSize: theme.typography.pxToRem(15),
|
|
marginRight: theme.spacing(1),
|
|
color: 'rgba(255, 255, 255, 0.7)',
|
|
'&.Mui-selected': {
|
|
color: '#fff',
|
|
},
|
|
'&.Mui-focusVisible': {
|
|
backgroundColor: 'rgba(100, 95, 228, 0.32)',
|
|
},
|
|
}),
|
|
);
|
|
|
|
export default function CustomizedTabs() {
|
|
const [value, setValue] = React.useState(0);
|
|
|
|
const handleChange = (event, newValue) => {
|
|
setValue(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ width: '100%' }}>
|
|
<Box sx={{ bgcolor: '#fff' }}>
|
|
<AntTabs value={value} onChange={handleChange} aria-label="ant example">
|
|
<AntTab label="Tab 1" />
|
|
<AntTab label="Tab 2" />
|
|
<AntTab label="Tab 3" />
|
|
</AntTabs>
|
|
<Box sx={{ p: 3 }} />
|
|
</Box>
|
|
<Box sx={{ bgcolor: '#2e1534' }}>
|
|
<StyledTabs
|
|
value={value}
|
|
onChange={handleChange}
|
|
aria-label="styled tabs example"
|
|
>
|
|
<StyledTab label="Workflows" />
|
|
<StyledTab label="Datasets" />
|
|
<StyledTab label="Connections" />
|
|
</StyledTabs>
|
|
<Box sx={{ p: 3 }} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|