35 lines
944 B
TypeScript
35 lines
944 B
TypeScript
|
import List from '@mui/material/List';
|
||
|
|
import ListItem from '@mui/material/ListItem';
|
||
|
|
import ListItemText from '@mui/material/ListItemText';
|
||
|
|
import ListSubheader from '@mui/material/ListSubheader';
|
||
|
|
|
||
|
|
export default function PinnedSubheaderList() {
|
||
|
|
return (
|
||
|
|
<List
|
||
|
|
sx={{
|
||
|
|
width: '100%',
|
||
|
|
maxWidth: 360,
|
||
|
|
bgcolor: 'background.paper',
|
||
|
|
position: 'relative',
|
||
|
|
overflow: 'auto',
|
||
|
|
maxHeight: 300,
|
||
|
|
'& ul': { padding: 0 },
|
||
|
|
}}
|
||
|
|
subheader={<li />}
|
||
|
|
>
|
||
|
|
{[0, 1, 2, 3, 4].map((sectionId) => (
|
||
|
|
<li key={`section-${sectionId}`}>
|
||
|
|
<ul>
|
||
|
|
<ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
|
||
|
|
{[0, 1, 2].map((item) => (
|
||
|
|
<ListItem key={`item-${sectionId}-${item}`}>
|
||
|
|
<ListItemText primary={`Item ${item}`} />
|
||
|
|
</ListItem>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</List>
|
||
|
|
);
|
||
|
|
}
|