27 lines
857 B
TypeScript
27 lines
857 B
TypeScript
import { cn } from "@/lib/utils"
|
|
|
|
interface MetricCardProps {
|
|
title: string
|
|
value: string | number
|
|
subtitle?: string
|
|
variant?: "default" | "primary" | "success" | "accent"
|
|
className?: string
|
|
}
|
|
|
|
const variants = {
|
|
default: "bg-white",
|
|
primary: "bg-primary/10 border-primary/20",
|
|
success: "bg-success/10 border-success/20",
|
|
accent: "bg-accent/10 border-accent/20",
|
|
}
|
|
|
|
export function MetricCard({ title, value, subtitle, variant = "default", className }: MetricCardProps) {
|
|
return (
|
|
<div className={cn("rounded-2xl p-4 shadow-sm border border-border", variants[variant], className)}>
|
|
<p className="text-sm text-muted-foreground">{title}</p>
|
|
<p className="text-3xl font-display font-bold text-foreground mt-1">{value}</p>
|
|
{subtitle && <p className="text-xs text-muted-foreground mt-1">{subtitle}</p>}
|
|
</div>
|
|
)
|
|
}
|