root
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import { LucideIcon } from 'lucide-react'
|
|
|
|
interface StatCardProps {
|
|
title: string
|
|
value: string | number
|
|
change?: number
|
|
vsLastMonthLabel?: string
|
|
icon: LucideIcon
|
|
iconColor?: string
|
|
iconBg?: string
|
|
}
|
|
|
|
export default function StatCard({
|
|
title,
|
|
value,
|
|
change,
|
|
vsLastMonthLabel = 'vs last month',
|
|
icon: Icon,
|
|
iconColor = 'text-blue-600',
|
|
iconBg = 'bg-blue-50',
|
|
}: StatCardProps) {
|
|
const isPositive = change !== undefined && change >= 0
|
|
const isNegative = change !== undefined && change < 0
|
|
|
|
return (
|
|
<div className="card p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm text-slate-500 font-medium">{title}</p>
|
|
<p className="text-2xl font-bold text-slate-900 mt-1">{value}</p>
|
|
{change !== undefined && (
|
|
<div className="flex items-center gap-1 mt-2">
|
|
<span
|
|
className={[
|
|
'text-xs font-medium',
|
|
isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-slate-500',
|
|
].join(' ')}
|
|
>
|
|
{isPositive ? '+' : ''}{change.toFixed(1)}%
|
|
</span>
|
|
<span className="text-xs text-slate-400">{vsLastMonthLabel}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`w-12 h-12 rounded-xl ${iconBg} flex items-center justify-center flex-shrink-0`}>
|
|
<Icon className={`w-6 h-6 ${iconColor}`} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|