@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
36 lines • 1.3 kB
JavaScript
import MuiCardHeader from '@mui/material/CardHeader';
import { styled } from '@mui/material/styles';
import { includes } from 'ramda';
const CardHeader = styled(MuiCardHeader, {
shouldForwardProp: prop => !includes(prop, ['variant', 'hasIcon', 'iconColor', 'filled', 'avatarProps', 'headerContentProps'])
})(({ theme, filled, hasIcon, iconColor = 'secondary', avatarProps, headerContentProps }) => ({
['&.MuiCardHeader-root']: {
...(filled && { backgroundColor: theme?.palette.grey[200], minHeight: '48px' })
},
['& .MuiCardHeader-avatar']: {
...(hasIcon && {
width: '3rem',
height: '3rem',
borderRadius: '0.75rem',
background: `linear-gradient(195deg, ${theme?.palette[iconColor].light}, ${theme?.palette[iconColor].main})`,
position: 'absolute',
top: '-20px',
...avatarProps
})
},
['& .MuiCardHeader-content']: {
...(hasIcon && {
paddingLeft: '80px'
}),
...headerContentProps
},
['& .MuiCardHeader-action']: {
gap: '0.5rem',
display: 'flex',
flex: '0 1 auto',
flexWrap: 'wrap',
justifyContent: 'flex-end'
}
}));
export default CardHeader;
//# sourceMappingURL=CardHeaderStyles.js.map