45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import { LucideIcon } from 'lucide-react'
|
|
|
|
interface StatsCardProps {
|
|
label: string
|
|
value: string | number
|
|
icon: LucideIcon
|
|
iconColor: string
|
|
iconBgColor: string
|
|
onClick?: () => void
|
|
isLoading?: boolean
|
|
}
|
|
|
|
export const StatsCard: React.FC<StatsCardProps> = ({
|
|
label,
|
|
value,
|
|
icon: Icon,
|
|
iconColor,
|
|
iconBgColor,
|
|
onClick,
|
|
isLoading = false,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={`bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow ${
|
|
onClick ? 'cursor-pointer' : ''
|
|
}`}
|
|
onClick={onClick}
|
|
role={onClick ? 'button' : undefined}
|
|
tabIndex={onClick ? 0 : undefined}
|
|
onKeyDown={onClick ? (e) => e.key === 'Enter' && onClick() : undefined}
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className={`p-3 rounded-lg ${iconBgColor}`}>
|
|
<Icon className={iconColor} size={24} />
|
|
</div>
|
|
</div>
|
|
<p className="text-2xl font-bold text-warm-text-primary mb-1">
|
|
{isLoading ? '...' : value}
|
|
</p>
|
|
<p className="text-sm text-warm-text-muted">{label}</p>
|
|
</div>
|
|
)
|
|
}
|