39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
export function KpiCard({
|
|
title, value, sub, subColor = "text-emerald-600", icon, tint = "bg-blue-50 text-blue-600",
|
|
}: {
|
|
title: string; value: React.ReactNode; sub?: string; subColor?: string;
|
|
icon: React.ReactNode; tint?: string;
|
|
}) {
|
|
return (
|
|
<div className="card p-5">
|
|
<div className="flex items-start gap-4">
|
|
<div className={cn("h-12 w-12 rounded-xl grid place-items-center shrink-0", tint)}>
|
|
{icon}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-sm text-slate-500">{title}</div>
|
|
<div className="text-2xl font-extrabold text-slate-900 mt-0.5">{value}</div>
|
|
{sub && <div className={cn("text-xs font-medium mt-1", subColor)}>{sub}</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function KpiSkeleton() {
|
|
return (
|
|
<div className="card p-5">
|
|
<div className="flex items-start gap-4">
|
|
<div className="skeleton h-12 w-12 rounded-xl" />
|
|
<div className="flex-1 space-y-2">
|
|
<div className="skeleton h-3 w-20" />
|
|
<div className="skeleton h-6 w-16" />
|
|
<div className="skeleton h-3 w-24" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|