File size: 1,174 Bytes
6e62ad1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | interface MetricCardProps {
label: string
value: string | number
sublabel?: string
icon?: string
accent?: string
trend?: number
}
export function MetricCard({ label, value, sublabel, icon, accent = '#7c3aed', trend }: MetricCardProps) {
return (
<div className="glass-card p-3.5 transition-all hover:scale-[1.02] hover:glow-accent group">
<div className="flex items-start justify-between mb-1.5">
<span className="text-[11px] text-pal-muted font-medium uppercase tracking-wide">{label}</span>
{icon && <span className="text-base opacity-60 group-hover:opacity-100 transition-opacity">{icon}</span>}
</div>
<div className="flex items-baseline gap-2">
<span
className="text-xl font-bold"
style={{ color: accent }}
>
{value}
</span>
{trend !== undefined && (
<span className={`text-xs ${trend >= 0 ? 'text-pal-green' : 'text-pal-red'}`}>
{trend >= 0 ? '↑' : '↓'} {Math.abs(trend)}
</span>
)}
</div>
{sublabel && <span className="text-[10px] text-pal-muted mt-0.5 block">{sublabel}</span>}
</div>
)
}
|