41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
// کارتِ آماریِ سربرگ — مقدارِ عددی LTR، واحد (مثلاً «تومان») جدا و RTL.
|
|
export default function StatCard({
|
|
label,
|
|
value,
|
|
suffix,
|
|
icon,
|
|
color = "var(--gold)",
|
|
sub,
|
|
loading,
|
|
}: {
|
|
label: string;
|
|
value?: React.ReactNode;
|
|
suffix?: string;
|
|
icon?: React.ReactNode;
|
|
color?: string;
|
|
sub?: React.ReactNode;
|
|
loading?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="card p-4 flex flex-col gap-2 min-w-0">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-xs text-[#8ab4e8]">{label}</span>
|
|
{icon && <span style={{ color }}>{icon}</span>}
|
|
</div>
|
|
{loading ? (
|
|
<div className="skeleton h-7 w-28" />
|
|
) : (
|
|
<div className="flex items-baseline gap-1.5 flex-wrap">
|
|
<span className="text-xl font-bold" style={{ color }}>
|
|
<span dir="ltr">{value ?? "—"}</span>
|
|
</span>
|
|
{suffix && <span className="text-[11px] text-[#8ab4e8]">{suffix}</span>}
|
|
</div>
|
|
)}
|
|
{sub && <div className="text-[11px] text-[#6f90bd]">{sub}</div>}
|
|
</div>
|
|
);
|
|
}
|