45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
|
interface StatCardProps {
|
||
|
|
label: string;
|
||
|
|
value: string | number;
|
||
|
|
change?: string;
|
||
|
|
changeType?: 'up' | 'down' | 'neutral';
|
||
|
|
progress?: number;
|
||
|
|
progressColor?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StatCard({
|
||
|
|
label,
|
||
|
|
value,
|
||
|
|
change,
|
||
|
|
changeType = 'neutral',
|
||
|
|
progress,
|
||
|
|
progressColor = 'bg-warning',
|
||
|
|
}: StatCardProps) {
|
||
|
|
return (
|
||
|
|
<div className="card p-4">
|
||
|
|
<div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-1.5">
|
||
|
|
{label}
|
||
|
|
</div>
|
||
|
|
<div className="font-display text-[26px] font-bold text-text-primary mb-1">
|
||
|
|
{value}
|
||
|
|
</div>
|
||
|
|
{change && (
|
||
|
|
<div className={`text-[11px] ${
|
||
|
|
changeType === 'up' ? 'text-danger' :
|
||
|
|
changeType === 'down' ? 'text-success' : 'text-text-muted'
|
||
|
|
}`}>
|
||
|
|
{change}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{progress !== undefined && (
|
||
|
|
<div className="h-[3px] bg-bg-page rounded mt-2.5 overflow-hidden">
|
||
|
|
<div
|
||
|
|
className={`h-full rounded ${progressColor}`}
|
||
|
|
style={{ width: `${progress}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|