31 lines
916 B
TypeScript
31 lines
916 B
TypeScript
interface StatCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
subtitle?: string;
|
|
color?: string;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export function StatCard({ title, value, subtitle, color = "#3b82f6", icon }: StatCardProps) {
|
|
return (
|
|
<div className="p-6 bg-white rounded-lg border-2 border-gray-200 hover:shadow-md transition-shadow">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-600 mb-1">{title}</p>
|
|
<p className="text-3xl font-bold" style={{ color }}>
|
|
{value}
|
|
</p>
|
|
{subtitle && (
|
|
<p className="text-sm text-gray-500 mt-1">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
{icon && (
|
|
<div className="p-3 rounded-lg" style={{ backgroundColor: `${color}20` }}>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|