42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { Link } from "react-router-dom"
|
|
import { cn } from "@/lib/utils"
|
|
import type { NodeSummary } from "@/types"
|
|
|
|
interface NodeBarProps {
|
|
nodes: NodeSummary[]
|
|
}
|
|
|
|
export function NodeBar({ nodes }: NodeBarProps) {
|
|
// Only show when there are remote nodes
|
|
if (nodes.length <= 1) return null
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 mb-6">
|
|
{nodes.map((node) => (
|
|
<Link
|
|
key={node.hostname}
|
|
to={`/node/${node.hostname}`}
|
|
className={cn(
|
|
"flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-md border transition-colors",
|
|
node.is_local
|
|
? "border-[var(--primary)] bg-[var(--primary)]/10 text-[var(--foreground)]"
|
|
: "border-[var(--border)] bg-[var(--card)] text-[var(--muted)] hover:text-[var(--foreground)] hover:border-[var(--foreground)]/20",
|
|
node.is_stale && "opacity-50",
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"w-2 h-2 rounded-full",
|
|
node.online && !node.is_stale ? "bg-green-400" : "bg-zinc-500",
|
|
)}
|
|
/>
|
|
<span className="font-medium">{node.hostname}</span>
|
|
{!node.is_local && node.deployed_count > 0 && (
|
|
<span className="text-xs text-[var(--muted)]">({node.deployed_count})</span>
|
|
)}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|