hex-bot
32798fbf14
All checks were successful
Dev Build / build-test (pull_request) Successful in 2m10s
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
|
|
interface SummaryCardProps {
|
|
title: string
|
|
value: string | number
|
|
icon: LucideIcon
|
|
color: 'emerald' | 'amber' | 'sky' | 'violet'
|
|
}
|
|
|
|
const colorMap = {
|
|
emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', text: 'text-emerald-400', icon: 'text-emerald-400' },
|
|
amber: { bg: 'bg-amber-500/10', border: 'border-amber-500/20', text: 'text-amber-400', icon: 'text-amber-400' },
|
|
sky: { bg: 'bg-sky-500/10', border: 'border-sky-500/20', text: 'text-sky-400', icon: 'text-sky-400' },
|
|
violet: { bg: 'bg-violet-500/10', border: 'border-violet-500/20', text: 'text-violet-400', icon: 'text-violet-400' },
|
|
}
|
|
|
|
export default function SummaryCard({ title, value, icon: Icon, color }: SummaryCardProps) {
|
|
const c = colorMap[color]
|
|
|
|
return (
|
|
<div className={`rounded-xl border ${c.border} ${c.bg} p-5 flex items-start justify-between`}>
|
|
<div>
|
|
<p className="text-sm font-medium text-slate-400 mb-1">{title}</p>
|
|
<p className={`text-3xl font-bold ${c.text}`}>{value}</p>
|
|
</div>
|
|
<div className={`p-2 rounded-lg ${c.bg}`}>
|
|
<Icon size={24} className={c.icon} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|