SimpleCard.jsx
1 import { Card, Box, styled } from "@mui/material"; 2 3 const CardRoot = styled(Card)({ 4 height: "100%", 5 padding: "20px 24px" 6 }); 7 8 const CardTitle = styled("div")(({ subtitle }) => ({ 9 fontSize: "1rem", 10 fontWeight: "500", 11 textTransform: "capitalize", 12 marginBottom: !subtitle && "16px" 13 })); 14 15 export default function SimpleCard({ children, title, subtitle }) { 16 return ( 17 <CardRoot elevation={6}> 18 <CardTitle subtitle={subtitle}>{title}</CardTitle> 19 {subtitle && <Box mb={2}>{subtitle}</Box>} 20 {children} 21 </CardRoot> 22 ); 23 }