27 lines
818 B
TypeScript
27 lines
818 B
TypeScript
 
|
import type { ReactNode } from "react";
|
||
|
|
|
||
|
|
export interface Kpi {
|
||
|
|
n: ReactNode;
|
||
|
|
label: string;
|
||
|
|
/** Turns pink when above zero. */
|
||
|
|
alert?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** The old kpis(): number tiles. Zero is grey, an alert above zero is pink. */
|
||
|
|
export function Kpis({ items, label = "Numbers" }: { items: Kpi[]; label?: string }) {
|
||
|
|
return (
|
||
|
|
<div className="kpis" role="group" aria-label={label}>
|
||
|
|
{items.map((k) => {
|
||
|
|
const zero = String(k.n) === "0";
|
||
|
|
const cls = ["kpi", k.alert && !zero ? "hot" : "", zero ? "zero" : ""].filter(Boolean).join(" ");
|
||
|
|
return (
|
||
|
|
<div key={k.label} className={cls} aria-label={`${k.label}: ${String(k.n)}`}>
|
||
|
|
<div className="n">{k.n}</div>
|
||
|
|
<div className="l">{k.label}</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|