Emil
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface KPICardProps {
|
|
label: string
|
|
value: string | number
|
|
suffix?: string
|
|
trend?: { value: number; label: string }
|
|
className?: string
|
|
}
|
|
|
|
export default function KPICard({ label, value, suffix, trend, className }: KPICardProps) {
|
|
return (
|
|
<Card className={cn('', className)}>
|
|
<CardContent className="pt-6">
|
|
<p className="text-sm text-muted-foreground">{label}</p>
|
|
<div className="flex items-baseline gap-1 mt-1">
|
|
<span className="text-2xl font-semibold tracking-tight">{value}</span>
|
|
{suffix && <span className="text-sm text-muted-foreground">{suffix}</span>}
|
|
</div>
|
|
{trend && (
|
|
<p className={cn(
|
|
'text-xs mt-1',
|
|
trend.value > 0 ? 'text-green-600' : trend.value < 0 ? 'text-red-600' : 'text-muted-foreground'
|
|
)}>
|
|
{trend.value > 0 ? '+' : ''}{trend.value}% {trend.label}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|