Sanitized mirror from private repository - 2026-04-05 05:32:08 UTC

dashboard/ui/components/stat-card.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+const accentColors: Record<string, string> = {
+  Containers: "from-blue-500 to-blue-600",
+  "Hosts Online": "from-green-500 to-emerald-600",
+  GPU: "from-violet-500 to-purple-600",
+  "Emails Today": "from-amber-500 to-orange-600",
+  Alerts: "from-red-500 to-rose-600",
+};
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  sub?: React.ReactNode;
+}
+
+export function StatCard({ label, value, sub }: StatCardProps) {
+  const gradient = accentColors[label] ?? "from-blue-500 to-blue-600";
+
+  return (
+    <Card className="card-hover-lift overflow-hidden relative group">
+      <div
+        className={`absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r ${gradient}`}
+      />
+      <div
+        className={`absolute top-0 left-0 right-0 h-8 bg-gradient-to-b ${gradient} opacity-[0.03] group-hover:opacity-[0.06] transition-opacity`}
+      />
+      <CardContent className="pt-4 pb-3 px-4 relative">
+        <p className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium mb-1">
+          {label}
+        </p>
+        <p className="text-2xl font-bold text-foreground tabular-nums-transition">
+          {value}
+        </p>
+        {sub && <div className="mt-1 text-xs text-muted-foreground">{sub}</div>}
+      </CardContent>
+    </Card>
+  );
+}