51 lines
1008 B
TypeScript
51 lines
1008 B
TypeScript
import { Card, CardContent, Typography } from "@mui/material";
|
|
|
|
interface Props {
|
|
label: string;
|
|
value: string;
|
|
subtext?: string;
|
|
}
|
|
|
|
export function MetricCard({ label, value, subtext }: Props) {
|
|
return (
|
|
<Card variant="outlined" sx={{ height: "100%" }}>
|
|
<CardContent
|
|
sx={{
|
|
p: { xs: 1.5, sm: 2 },
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 0.5,
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
sx={{ textTransform: "uppercase", lineHeight: 1.2 }}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
fontWeight: 700,
|
|
fontSize: { xs: "1.05rem", sm: "1.5rem" },
|
|
lineHeight: 1.15,
|
|
}}
|
|
>
|
|
{value}
|
|
</Typography>
|
|
{subtext && (
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
sx={{ whiteSpace: "pre-line", display: "block", lineHeight: 1.35 }}
|
|
>
|
|
{subtext}
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|