45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import type { LucideIcon } from "lucide-react";
|
|
|
|
interface StatCardProps {
|
|
title: string;
|
|
value: string | number;
|
|
subtitle?: string;
|
|
icon?: LucideIcon;
|
|
className?: string;
|
|
}
|
|
|
|
export function StatCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
icon: Icon,
|
|
className,
|
|
}: StatCardProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-lg border border-[var(--border)] bg-[var(--card)] p-4",
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<p className="text-sm text-[var(--muted-foreground)]">{title}</p>
|
|
<p className="text-2xl font-bold mt-1">{value}</p>
|
|
{subtitle && (
|
|
<p className="text-xs text-[var(--muted-foreground)] mt-1">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{Icon && (
|
|
<div className="p-2 rounded-md bg-[var(--primary)]/10">
|
|
<Icon className="h-5 w-5 text-[var(--primary)]" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|