@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.
54 lines • 1.78 kB
JavaScript
import BaseCard from '@mui/material/Card';
import BaseCardContent from '@mui/material/CardContent';
import { styled } from '@mui/material/styles';
import { includes } from 'ramda';
import defaultTheme from '../../themes/defaultTheme';
export const iconStyle = {
color: '#FFFFFF',
width: '30px',
height: '30px',
margin: 'auto',
padding: '2px'
};
const getThemeColor = ({ palette: { gradients, white, primary } }, color) => {
switch (color) {
case 'rose':
return { background: gradients.rose, color: white.main };
case 'success':
return { background: gradients.success };
case 'error':
return { background: gradients.error };
case 'primary':
return { background: primary.main, color: white.main };
case 'warning':
return { background: gradients.warning };
case 'info':
return { background: gradients.info };
default:
return { color: primary.main };
}
};
const Card = styled(BaseCard, {
shouldForwardProp: prop => !includes(prop, ['hasIcon', 'iconColor'])
})(({ theme, color, hasIcon }) => {
return {
...getThemeColor(theme || defaultTheme, color),
...(hasIcon && {
display: 'inline-block',
position: 'relative',
margin: '25px 0',
width: '100%',
background: '#fff',
overflow: 'visible'
})
};
});
export const CardContent = styled(BaseCardContent, {
shouldForwardProp: prop => !includes(prop, ['hasHeader', 'hasIcon'])
})(({ hasHeader, hasIcon }) => {
return {
padding: !hasHeader || hasIcon ? '24px' : '8px 24px 24px 24px'
};
});
export default Card;
//# sourceMappingURL=CardStyles.js.map