forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
SizesList.js
56 lines (55 loc) · 1.5 KB
/
SizesList.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import * as React from 'react';
import Box from '@mui/joy/Box';
import List from '@mui/joy/List';
import ListItem from '@mui/joy/ListItem';
import ListItemDecorator from '@mui/joy/ListItemDecorator';
import ListItemButton from '@mui/joy/ListItemButton';
import Typography from '@mui/joy/Typography';
import Home from '@mui/icons-material/Home';
export default function SizesList() {
return (
<Box
sx={{
flexGrow: 1,
display: 'flex',
justifyContent: 'center',
gap: 6,
flexWrap: 'wrap',
'& > *': { minWidth: 0, flexBasis: 200 },
}}
>
{['sm', 'md', 'lg'].map((size) => (
<Box key={size}>
<Typography level="body3" mb={2}>
<code>size="{size}"</code>
</Typography>
<List
size={size}
variant="outlined"
sx={{
borderRadius: 'sm',
maxWidth: 300,
boxShadow: 'sm',
bgcolor: 'background.body',
}}
>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<Home />
</ListItemDecorator>
Home
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>Projects</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>Settings</ListItemButton>
</ListItem>
</List>
</Box>
))}
</Box>
);
}