Sanitized mirror from private repository - 2026-04-18 11:19:59 UTC

dashboard/ui/components/host-card.tsx

@@ -0,0 +1,88 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+
+const hostColors: Record<string, string> = {
+  atlantis: "text-blue-400",
+  calypso: "text-violet-400",
+  olares: "text-emerald-400",
+  nuc: "text-amber-400",
+  rpi5: "text-cyan-400",
+};
+
+const hostDescriptions: Record<string, string> = {
+  atlantis: "NAS · media stack",
+  calypso: "DNS · SSO · Headscale",
+  olares: "K3s · 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_16px_rgba(239,68,68,0.05)]"
+    : running > 0
+      ? "hover:shadow-[0_0_16px_rgba(34,197,94,0.05)]"
+      : "hover:shadow-[0_0_16px_rgba(245,158,11,0.05)]";
+
+  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 capitalize ${hostColors[name] ?? "text-foreground"}`}>
+            {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>
+  );
+}
+
+export function HostRow({ name, running, total, error }: HostCardProps) {
+  const isOlares = name === "olares";
+  return (
+    <div className="flex items-center justify-between py-2 px-1 text-sm">
+      <div className="flex items-center gap-2">
+        <span
+          className={`w-2 h-2 rounded-full ${error ? "bg-red-500" : "bg-green-500"}`}
+          style={{
+            boxShadow: error
+              ? "0 0 6px rgba(239,68,68,0.5)"
+              : "0 0 6px rgba(34,197,94,0.5)",
+          }}
+        />
+        <span className={`font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>{name}</span>
+      </div>
+      <span className="text-muted-foreground text-xs">
+        {isOlares && !total ? "K3s + GPU" : `${running}/${total}`}
+      </span>
+    </div>
+  );
+}