@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
109 lines • 3.66 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Avatar } from '@mui/material';
export const StyledAvatar = styled(Avatar, {
shouldForwardProp: (prop) => prop !== 'size' &&
prop !== 'color' &&
prop !== 'bordered' &&
prop !== 'clickable',
})(({ theme, size, color, bordered, clickable }) => {
const getSizeStyles = () => {
switch (size) {
case 'small':
return {
width: 32,
height: 32,
fontSize: theme.typography.caption.fontSize,
};
case 'medium':
return {
width: 40,
height: 40,
fontSize: theme.typography.body2.fontSize,
};
case 'large':
return {
width: 56,
height: 56,
fontSize: theme.typography.h6.fontSize,
};
case 'xlarge':
return {
width: 80,
height: 80,
fontSize: theme.typography.h4.fontSize,
};
default:
return {
width: 40,
height: 40,
fontSize: theme.typography.body2.fontSize,
};
}
};
const getColorStyles = () => {
switch (color) {
case 'primary':
return {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
};
case 'secondary':
return {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
};
case 'success':
return {
backgroundColor: theme.palette.success.main,
color: theme.palette.success.contrastText,
};
case 'error':
return {
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText,
};
case 'warning':
return {
backgroundColor: theme.palette.warning.main,
color: theme.palette.warning.contrastText,
};
case 'info':
return {
backgroundColor: theme.palette.info.main,
color: theme.palette.info.contrastText,
};
default:
return {
backgroundColor: theme.palette.grey[400],
color: theme.palette.getContrastText(theme.palette.grey[400]),
};
}
};
return {
...getSizeStyles(),
...getColorStyles(),
fontWeight: theme.typography.fontWeightMedium,
transition: theme.transitions.create([
'transform',
'box-shadow',
'border-color',
], {
duration: theme.transitions.duration.short,
}),
...(bordered && {
border: `2px solid ${theme.palette.background.paper}`,
boxShadow: theme.shadows[2],
}),
...(clickable && {
cursor: 'pointer',
'&:hover': {
transform: 'scale(1.05)',
boxShadow: theme.shadows[4],
},
'&:active': {
transform: 'scale(0.98)',
},
}),
};
});
//# sourceMappingURL=Avatar.style.js.map