25 lines
575 B
TypeScript
25 lines
575 B
TypeScript
import type { LucideIcon } from 'lucide-react'
|
|
|
|
interface MetricCardProps {
|
|
icon: LucideIcon
|
|
label: string
|
|
value: string
|
|
delta?: string
|
|
hint?: string
|
|
color: string
|
|
}
|
|
|
|
export function MetricCard({ icon: Icon, label, value, delta, hint, color }: MetricCardProps) {
|
|
return (
|
|
<div className="metric">
|
|
<div className={`metric-icon ${color}`}>
|
|
<Icon size={21} />
|
|
</div>
|
|
<div>
|
|
<span>{label}</span>
|
|
<strong>{value}</strong>
|
|
<small className={hint ? 'warn' : ''}>{delta ?? hint}</small>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |