Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 98 99 100 101 102 103 104 105 106 107 | 10x 10x 91x 637x |
import { alpha } from '@mui/material/styles';
import { avatarGroupClasses } from '@mui/material/AvatarGroup';
// ----------------------------------------------------------------------
const COLORS = ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'error'];
const colorByName = (name) => {
const charAt = name.charAt(0).toLowerCase();
if (['a', 'c', 'f'].includes(charAt)) return 'primary';
if (['e', 'd', 'h'].includes(charAt)) return 'secondary';
if (['i', 'k', 'l'].includes(charAt)) return 'info';
if (['m', 'n', 'p'].includes(charAt)) return 'success';
if (['q', 's', 't'].includes(charAt)) return 'warning';
if (['v', 'x', 'y'].includes(charAt)) return 'error';
return 'default';
};
// NEW VARIANT
// ----------------------------------------------------------------------
export function avatar(theme) {
return {
MuiAvatar: {
variants: COLORS.map((color) =>
color === 'default'
? {
props: { color: 'default' },
style: {
color: theme.palette.text.secondary,
backgroundColor: alpha(theme.palette.grey[500], 0.24),
},
}
: {
props: { color },
style: {
color: theme.palette[color].contrastText,
backgroundColor: theme.palette[color].main,
},
}
),
styleOverrides: {
rounded: {
borderRadius: theme.shape.borderRadius * 1.5,
},
colorDefault: ({ ownerState }) => {
const color = colorByName(`${ownerState.alt}`);
return {
...(!!ownerState.alt && {
...(color !== 'default'
? {
color: theme.palette[color].contrastText,
backgroundColor: theme.palette[color].main,
}
: {
color: theme.palette.text.secondary,
backgroundColor: alpha(theme.palette.grey[500], 0.24),
}),
}),
};
},
},
},
MuiAvatarGroup: {
styleOverrides: {
root: ({ ownerState }) => ({
justifyContent: 'flex-end',
...(ownerState.variant === 'compact' && {
width: 40,
height: 40,
position: 'relative',
[`& .${avatarGroupClasses.avatar}`]: {
margin: 0,
width: 28,
height: 28,
position: 'absolute',
'&:first-of-type': {
left: 0,
bottom: 0,
zIndex: 9,
},
'&:last-of-type': {
top: 0,
right: 0,
},
},
}),
}),
avatar: {
fontSize: 16,
fontWeight: theme.typography.fontWeightSemiBold,
'&:first-of-type': {
fontSize: 12,
color: theme.palette.primary.dark,
backgroundColor: theme.palette.primary.lighter,
},
},
},
},
};
}
|