export type MetricStatus = "nil" | "good" | "warning" | "critical"; type MetricCardProps = { title: string; value: string; status: MetricStatus; subtitle?: string; }; export function MetricCard({ props, children, }: { props: MetricCardProps; children: React.ReactNode; }) { const indicateColor = getStatusColor(props.status); return (

{props.title}

{props.value}
{props.subtitle}
{children}
); } const getStatusColor = (status: MetricStatus) => { switch (status) { case "nil": return "bg-gray-500"; case "good": return "bg-green-500"; case "warning": return "bg-yellow-500"; case "critical": return "bg-red-500"; } };