89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}
|