Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 4x 82x 82x 48x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { ReactNode } from "react";
interface HubStatCardProps {
label: string;
value: ReactNode;
/** Optional sub-label / caption under the value. */
caption?: ReactNode;
/**
* Optional leading icon, rendered inside a rounded grey badge above the
* label (Financial Details cards). When present the card uses the taller
* 24px vertical padding from the design.
*/
icon?: ReactNode;
/** Flex basis override (defaults to 200px / KPI sizing). */
basis?: string;
}
/**
* Single labelled stat tile used by the KPI / Cash Position / Financial Details
* sections. With an `icon`, it matches the taller Financial Details card from
* the design.
*/
const HubStatCard = ({
label,
value,
caption,
icon,
basis = "200px",
}: HubStatCardProps) => {
return (
<Stack
justifyContent="center"
gap={icon ? "12px" : "4px"}
sx={(theme) => ({
flex: `1 1 ${basis}`,
minWidth: basis,
minHeight: icon ? "154px" : "90px",
padding: icon ? "24px 20px" : "16px 20px",
borderRadius: "8px",
border: `1px solid ${theme.palette.border?.primary ?? "#E5E5E3"}`,
background: theme.palette.surface?.primary ?? theme.palette.background?.paper,
})}
data-testid={`hub-stat-${label}`}
>
{icon && (
<Stack
alignItems="center"
justifyContent="center"
sx={(theme) => ({
width: "36px",
height: "36px",
borderRadius: "24px",
color: theme.palette.icon?.["icon-primary"] ?? theme.palette.text.primary,
background: theme.palette.surface?.secondary ?? "#F5F5F3",
})}
>
{icon}
</Stack>
)}
<Stack gap="4px">
<GiveText variant="bodyS" color="secondary">
{label}
</GiveText>
<GiveText variant="h3">{value}</GiveText>
{caption && (
<GiveText variant="bodyXS" color="secondary">
{caption}
</GiveText>
)}
</Stack>
</Stack>
);
};
export default HubStatCard;
|