/
avatar-group.tsx
97 lines (94 loc) · 3.14 KB
/
avatar-group.tsx
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import * as React from 'react';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useColorScheme,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import { Avatar, AvatarGroup } from '@mui/material';
const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
return (
<Button
variant="outlined"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <Moon /> : <Sun />}
</Button>
);
};
export default function AvatarGroupCssVars() {
return (
<CssVarsProvider>
<CssBaseline />
<Container sx={{ my: 5 }}>
<Box sx={{ pb: 2 }}>
<ColorSchemePicker />
</Box>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
gridAutoRows: 'minmax(160px, auto)',
gap: 2,
'& > div': {
placeSelf: 'center',
},
}}
>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<AvatarGroup>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
<AvatarGroup variant="rounded">
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
<AvatarGroup variant="square">
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
</Box>
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 4, mb: 1 }}>
<AvatarGroup>
<Avatar>H</Avatar>
<Avatar>H</Avatar>
<Avatar>H</Avatar>
</AvatarGroup>
<AvatarGroup variant="rounded">
<Avatar variant="rounded">H</Avatar>
<Avatar variant="rounded">H</Avatar>
<Avatar variant="rounded">H</Avatar>
</AvatarGroup>
<AvatarGroup variant="square">
<Avatar variant="square">H</Avatar>
<Avatar variant="square">H</Avatar>
<Avatar variant="square">H</Avatar>
</AvatarGroup>
</Box>
</Box>
</Container>
</CssVarsProvider>
);
}