type SignalCardProps = { label?: string; /** A number drives the progress rail. Strings are displayed as-is and parsed when possible. */ value?: number | string; /** Upper bound used to compute progress. Without it the rail is hidden. */ max?: number; /** Text shown instead of the formatted numeric value. */ displayValue?: string; trend?: string; detail?: string; formatValue?: (value: number) => string; className?: string; }; const compactNumber = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }); export function SignalCard({ label = "Weekly installs", value: valueProp, max, displayValue, trend = "+24%", detail, formatValue = (input) => compactNumber.format(input), className = "", }: SignalCardProps) { const value = valueProp ?? 18420; const limit = max ?? (valueProp === undefined ? 25000 : undefined); const numeric = typeof value === "number" ? value : Number.parseFloat(value); const hasProgress = Number.isFinite(numeric) && typeof limit === "number" && limit > 0; const bounded = hasProgress ? Math.min(Math.max(numeric, 0), limit as number) : 0; const percent = hasProgress ? Math.round((bounded / (limit as number)) * 100) : 0; const shownValue = displayValue ?? (typeof value === "number" ? formatValue(value) : value); const shownDetail = detail ?? (hasProgress ? percent + "% of the " + formatValue(limit as number) + " target" : undefined); return (

{label}

{shownValue}

{trend ? ( {trend} ) : null}

{hasProgress ? (

) : null} {shownDetail ?

{shownDetail}

: null}

); }