30 lines
866 B
TypeScript
30 lines
866 B
TypeScript
interface StatCardProps {
|
|
icon: React.ElementType;
|
|
label: string;
|
|
value: string;
|
|
color: 'blue' | 'green' | 'purple' | 'orange';
|
|
}
|
|
|
|
const colorClasses: Record<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 }: 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">
|
|
<p className="text-sm font-medium text-gray-600">{label}</p>
|
|
<p className="text-2xl font-bold text-gray-900">{value}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|