67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|