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

dashboard/ui/components/host-card.tsx

@@ -0,0 +1,58 @@
+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 statusColor = error ? "red" : running > 0 ? "green" : "amber";
+  const hoverBorder = error
+    ? "hover:border-red-500/20"
+    : running > 0
+      ? "hover:border-green-500/20"
+      : "hover:border-amber-500/20";
+
+  const hoverGlow = error
+    ? "hover:shadow-[0_0_30px_rgba(239,68,68,0.06)]"
+    : running > 0
+      ? "hover:shadow-[0_0_30px_rgba(34,197,94,0.06)]"
+      : "hover:shadow-[0_0_30px_rgba(245,158,11,0.06)]";
+
+  return (
+    <Card
+      className={`card-hover-lift transition-all duration-300 ${hoverBorder} ${hoverGlow} 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={statusColor}
+            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/60 mt-0.5">
+            {hostDescriptions[name]}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}