feat: more stat components

web/src/components/stat-card.tsx

@@ -0,0 +1,53 @@
+import React, { type ReactNode } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Skeleton } from "./ui/skeleton";
+import { type LucideIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface StatCardProps {
+    title: string;
+    value: ReactNode;
+    subtitle?: ReactNode;
+    icon: LucideIcon;
+    isLoading?: boolean;
+    className?: string;
+    valueClassName?: string;
+    iconClassName?: string;
+}
+
+export function StatCard({
+    title,
+    value,
+    subtitle,
+    icon: Icon,
+    isLoading = false,
+    className,
+    valueClassName,
+    iconClassName,
+}: StatCardProps) {
+    return (
+        <Card className={cn("glass-card border-none bg-card/40 hover-glow", className)}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">{title}</CardTitle>
+                <Icon className={cn("h-4 w-4", iconClassName || "text-muted-foreground")} />
+            </CardHeader>
+            <CardContent>
+                {isLoading ? (
+                    <div className="space-y-2">
+                        <Skeleton className="h-8 w-[60px]" />
+                        <Skeleton className="h-3 w-[100px]" />
+                    </div>
+                ) : (
+                    <>
+                        <div className={cn("text-2xl font-bold", valueClassName)}>{value}</div>
+                        {subtitle && (
+                            <p className="text-xs text-muted-foreground mt-1">
+                                {subtitle}
+                            </p>
+                        )}
+                    </>
+                )}
+            </CardContent>
+        </Card>
+    );
+}