/ frontend / src / app / components / SimpleCard.jsx
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  }