File size: 1,995 Bytes
4114d85 |
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 |
import PropTypes from 'prop-types'
// material-ui
import { useTheme } from '@mui/material/styles'
import MuiAvatar from '@mui/material/Avatar'
// ==============================|| AVATAR ||============================== //
const Avatar = ({ color, outline, size, sx, ...others }) => {
const theme = useTheme()
const colorSX = color && !outline && { color: theme.palette.background.paper, bgcolor: `${color}.main` }
const outlineSX = outline && {
color: color ? `${color}.main` : `primary.main`,
bgcolor: theme.palette.background.paper,
border: '2px solid',
borderColor: color ? `${color}.main` : `primary.main`
}
let sizeSX = {}
switch (size) {
case 'badge':
sizeSX = {
width: theme.spacing(3.5),
height: theme.spacing(3.5)
}
break
case 'xs':
sizeSX = {
width: theme.spacing(4.25),
height: theme.spacing(4.25)
}
break
case 'sm':
sizeSX = {
width: theme.spacing(5),
height: theme.spacing(5)
}
break
case 'lg':
sizeSX = {
width: theme.spacing(9),
height: theme.spacing(9)
}
break
case 'xl':
sizeSX = {
width: theme.spacing(10.25),
height: theme.spacing(10.25)
}
break
case 'md':
sizeSX = {
width: theme.spacing(7.5),
height: theme.spacing(7.5)
}
break
default:
sizeSX = {}
}
return <MuiAvatar sx={{ ...colorSX, ...outlineSX, ...sizeSX, ...sx }} {...others} />
}
Avatar.propTypes = {
className: PropTypes.string,
color: PropTypes.string,
outline: PropTypes.bool,
size: PropTypes.string,
sx: PropTypes.object
}
export default Avatar
|