36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { Users, Newspaper, Calendar, GraduationCap, type LucideIcon } from 'lucide-react'
|
|
|
|
interface Stat {
|
|
label: string
|
|
value: number
|
|
icon: string
|
|
}
|
|
|
|
const ICON_MAP: Record<string, LucideIcon> = {
|
|
'👥': Users,
|
|
'📰': Newspaper,
|
|
'📅': Calendar,
|
|
'🎓': GraduationCap,
|
|
}
|
|
|
|
export function StatsCards({ stats }: { stats: Stat[] }) {
|
|
return (
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{stats.map((stat) => {
|
|
const Icon = ICON_MAP[stat.icon] ?? Users
|
|
return (
|
|
<div key={stat.label} className="stat-card flex flex-col gap-3">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="text-4xl font-bold text-gray-900 leading-none">{stat.value}</div>
|
|
<div className="text-xs text-gray-500 mt-2 uppercase tracking-wide font-medium">{stat.label}</div>
|
|
</div>
|
|
<Icon size={18} className="text-gray-300 flex-shrink-0 mt-0.5" />
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|