34 lines
680 B
TypeScript
34 lines
680 B
TypeScript
import type { ReactNode } from "react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export function KpiCard({
|
|
label,
|
|
value,
|
|
sub,
|
|
tone,
|
|
to,
|
|
}: {
|
|
label: string;
|
|
value: ReactNode;
|
|
sub?: ReactNode;
|
|
tone?: "red" | "amber" | "blue";
|
|
to?: string;
|
|
}) {
|
|
const body = (
|
|
<>
|
|
<span className="kpi-label">{label}</span>
|
|
<span className="kpi-value">{value}</span>
|
|
{sub ? <span className="kpi-sub">{sub}</span> : null}
|
|
</>
|
|
);
|
|
const className = `kpi-card${tone ? ` tone-${tone}` : ""}`;
|
|
if (to) {
|
|
return (
|
|
<Link to={to} className={className}>
|
|
{body}
|
|
</Link>
|
|
);
|
|
}
|
|
return <div className={className}>{body}</div>;
|
|
}
|