103 lines
2 KiB
TypeScript
103 lines
2 KiB
TypeScript
import Card from "@mui/material/Card";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
|
|
export type StatCardProps = {
|
|
title: string;
|
|
value: number;
|
|
};
|
|
|
|
export default function StatCard({ title, value }: StatCardProps) {
|
|
const theme = useTheme();
|
|
const isXsScreen = useMediaQuery(theme.breakpoints.only("xs"));
|
|
const isSmScreen = useMediaQuery(theme.breakpoints.only("sm"));
|
|
const isMdScreen = useMediaQuery(theme.breakpoints.only("md"));
|
|
|
|
return (
|
|
<Card
|
|
variant="outlined"
|
|
sx={{
|
|
width: "100%",
|
|
height: "100px",
|
|
padding: {
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "10px",
|
|
},
|
|
borderRadius: "12px",
|
|
border: "none",
|
|
gap: "24px",
|
|
background: "#D0E1E9",
|
|
|
|
}}
|
|
>
|
|
<CardContent
|
|
sx={{
|
|
padding: {
|
|
xs: "8px",
|
|
sm: "12px",
|
|
md: "16px",
|
|
},
|
|
"&:last-child": {
|
|
paddingBottom: {
|
|
xs: "8px",
|
|
sm: "12px",
|
|
md: "16px",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Typography
|
|
component="h2"
|
|
variant="subtitle2"
|
|
sx={{
|
|
fontWeight: 600,
|
|
|
|
fontSize: {
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "16px",
|
|
},
|
|
lineHeight: {
|
|
xs: "12px",
|
|
sm: "13px",
|
|
md: "14px",
|
|
},
|
|
letterSpacing: "0%",
|
|
width: "auto",
|
|
height: "auto",
|
|
marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing
|
|
}}
|
|
gutterBottom
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<Typography
|
|
component="h1"
|
|
variant="body1"
|
|
sx={{
|
|
fontWeight: 600,
|
|
fontSize: {
|
|
xs: "24px",
|
|
sm: "28px",
|
|
md: "30px",
|
|
},
|
|
lineHeight: {
|
|
xs: "28px",
|
|
sm: "32px",
|
|
md: "36px",
|
|
},
|
|
letterSpacing: "0%",
|
|
width: "auto",
|
|
height: "auto",
|
|
}}
|
|
gutterBottom
|
|
>
|
|
{value}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |