Sanitized mirror from private repository - 2026-04-05 06:40:46 UTC

dashboard/ui/components/host-card.tsx

@@ -0,0 +1,66 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+
+const hostDescriptions: Record<string, string> = {
+  atlantis: "NAS \u00b7 media stack",
+  calypso: "DNS \u00b7 SSO \u00b7 Headscale",
+  olares: "K3s \u00b7 RTX 5090",
+  nuc: "lightweight svcs",
+  rpi5: "Uptime Kuma",
+};
+
+interface HostCardProps {
+  name: string;
+  running: number;
+  total: number;
+  error?: boolean;
+}
+
+export function HostCard({ name, running, total, error }: HostCardProps) {
+  const borderColor = error
+    ? "border-red-500/30 hover:border-red-500/50"
+    : running > 0
+      ? "border-green-500/20 hover:border-green-500/40"
+      : "border-amber-500/20 hover:border-amber-500/40";
+
+  const glowColor = error
+    ? "hover:shadow-red-500/5"
+    : running > 0
+      ? "hover:shadow-green-500/5"
+      : "hover:shadow-amber-500/5";
+
+  const pct = total > 0 ? (running / total) * 100 : 0;
+
+  return (
+    <Card
+      className={`card-hover-lift border transition-colors duration-300 ${borderColor} ${glowColor} overflow-hidden relative group`}
+    >
+      <CardContent className="pt-3 pb-3 px-4">
+        <div className="flex items-center justify-between mb-1">
+          <span className="text-sm font-medium text-foreground capitalize">
+            {name}
+          </span>
+          <StatusBadge
+            color={error ? "red" : running > 0 ? "green" : "amber"}
+            label={error ? "error" : "online"}
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {running}/{total} containers
+        </p>
+        {hostDescriptions[name] && (
+          <p className="text-[10px] text-muted-foreground mt-0.5">
+            {hostDescriptions[name]}
+          </p>
+        )}
+        {/* Utilization micro-bar */}
+        <div className="mt-2 h-1 rounded-full bg-secondary/50 overflow-hidden">
+          <div
+            className="h-full rounded-full bg-gradient-to-r from-green-500 to-emerald-400 transition-all duration-500"
+            style={{ width: `${pct}%` }}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}