40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
interface StatCardProps {
|
|
icon: React.ElementType;
|
|
label: string;
|
|
value: string;
|
|
color: 'blue' | 'green' | 'purple' | 'orange';
|
|
/** When true, renders a pulsing green dot to signal a live/active state. */
|
|
indicator?: boolean;
|
|
}
|
|
|
|
const colorClasses: Record<NonNullable<StatCardProps['color']>, string> = {
|
|
blue: 'bg-blue-50 text-blue-600',
|
|
green: 'bg-green-50 text-green-600',
|
|
purple: 'bg-purple-50 text-purple-600',
|
|
orange: 'bg-orange-50 text-orange-600',
|
|
};
|
|
|
|
export function StatCard({ icon: Icon, label, value, color, indicator }: StatCardProps) {
|
|
return (
|
|
<div className="card p-4">
|
|
<div className="flex items-center">
|
|
<div className={`p-3 rounded-lg ${colorClasses[color]}`}>
|
|
<Icon className="h-6 w-6" />
|
|
</div>
|
|
<div className="ml-4 flex-1">
|
|
<p className="text-sm font-medium text-gray-600">{label}</p>
|
|
<div className="flex items-center gap-2">
|
|
{indicator && (
|
|
<span
|
|
className="inline-block h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse"
|
|
title="Timer running"
|
|
/>
|
|
)}
|
|
<p className="text-2xl font-bold text-gray-900">{value}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|