24 lines
850 B
TypeScript
24 lines
850 B
TypeScript
import { Icon, type IconifyIcon } from "@iconify/react";
|
|
|
|
interface StatCardProps {
|
|
icon: IconifyIcon;
|
|
label: string;
|
|
value: string;
|
|
hint: string;
|
|
}
|
|
|
|
export function StatCard({ icon, label, value, hint }: StatCardProps) {
|
|
return (
|
|
<div className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-muted">{label}</span>
|
|
<span className="flex size-9 items-center justify-center rounded-lg bg-accent-soft">
|
|
<Icon icon={icon} width={18} height={18} className="text-accent-soft-foreground" aria-hidden="true" />
|
|
</span>
|
|
</div>
|
|
<p className="text-3xl font-semibold tabular-nums text-foreground">{value}</p>
|
|
<p className="text-xs text-muted">{hint}</p>
|
|
</div>
|
|
);
|
|
}
|