62 lines
1.1 KiB
TypeScript
62 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
type KpiColor = "neutral" | "amber" | "green" | "red" | "blue";
|
|
|
|
const BG: Record<KpiColor, string> = {
|
|
neutral: "#f9fafb",
|
|
amber: "#fef3c7",
|
|
green: "#dcfce7",
|
|
red: "#fee2e2",
|
|
blue: "#dbeafe",
|
|
};
|
|
|
|
const FG: Record<KpiColor, string> = {
|
|
neutral: "#374151",
|
|
amber: "#b45309",
|
|
green: "#15803d",
|
|
red: "#b91c1c",
|
|
blue: "#1d4ed8",
|
|
};
|
|
|
|
interface Props {
|
|
value: string;
|
|
label: string;
|
|
color?: KpiColor;
|
|
}
|
|
|
|
export function KpiCard({ value, label, color = "neutral" }: Props) {
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "12px 16px",
|
|
background: BG[color],
|
|
borderRadius: 10,
|
|
minWidth: 0,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontSize: 20,
|
|
fontWeight: 700,
|
|
color: FG[color],
|
|
lineHeight: 1.2,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{value}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: 11,
|
|
color: "#6b7280",
|
|
marginTop: 4,
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
{label}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|