51 lines
3.6 KiB
TypeScript
51 lines
3.6 KiB
TypeScript
"use client"
|
|
import { useMemo, useState } from "react"
|
|
import { Input } from "@/components/ui/input"
|
|
import { cn } from "@/lib/utils"
|
|
import { CheckIcon } from "lucide-react"
|
|
export interface GatewayOption { id: string; name: string; ip: string; status: "active" | "inactive" | "unknown" }
|
|
export function RecursiveGatewayChoices({ gateways, selectedValue, endpointNumber, onChange }: { gateways: GatewayOption[]; selectedValue: string; endpointNumber: number; onChange: (value: string) => void }) {
|
|
const [search, setSearch] = useState("")
|
|
const matches = useMemo(() => gateways.filter(g => (g.ip + "%" + g.name).toLowerCase().includes(search.toLowerCase())), [gateways, search])
|
|
const selected = matches.find(g => g.ip + "%" + g.name === selectedValue)
|
|
const visible = (selected ? [selected, ...matches.filter(g => g.id !== selected.id)] : matches).slice(0, 5)
|
|
return <div className="flex flex-col gap-1.5">
|
|
{gateways.length > 5 && <Input aria-label={"Поиск шлюза для endpoint " + endpointNumber} placeholder="IP или имя шлюза…" value={search} onChange={event => setSearch(event.target.value)} />}
|
|
{gateways.length > 5 && <p role="status" className="text-xs text-muted-foreground">Показано {visible.length} из {matches.length} шлюзов. Поиск охватывает весь список.</p>}
|
|
{search && matches.length === 0 && <p role="status" className="text-xs text-muted-foreground">Шлюзы не найдены. Измените поиск или введите адрес вручную.</p>}
|
|
{visible.map((g) => {
|
|
const value = `${g.ip}%${g.name}`
|
|
const selected = selectedValue === value
|
|
return (
|
|
<button
|
|
key={g.id}
|
|
type="button"
|
|
aria-label={`Выбрать шлюз ${value}`}
|
|
aria-pressed={selected}
|
|
onClick={() => onChange(value)}
|
|
className={cn(
|
|
"text-left rounded-lg border px-3 py-2.5 transition-all",
|
|
selected
|
|
? "border-primary bg-primary/5 ring-1 ring-primary/30"
|
|
: "border-border hover:border-muted-foreground/40 hover:bg-muted/40",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className={cn("size-1.5 rounded-full shrink-0", g.status === "active" ? "bg-success" : "bg-muted-foreground")} />
|
|
<span className="font-mono text-xs font-semibold flex-1 truncate">{g.name}</span>
|
|
<span className="text-xs text-muted-foreground">{g.status === "active" ? "Активный маршрут" : g.status === "inactive" ? "Неактивный маршрут" : "Статус неизвестен"}</span>
|
|
{selected && <CheckIcon aria-hidden="true" className="size-3.5 text-primary shrink-0" />}
|
|
</div>
|
|
<div className="mt-1.5 grid grid-cols-[auto_auto_1fr] items-start gap-2 text-[11px] text-muted-foreground font-mono">
|
|
<span className="text-muted-foreground/50 break-all">{g.ip}</span>
|
|
<span className="text-muted-foreground/30">→</span>
|
|
<span className={cn("min-w-0 break-all whitespace-normal leading-tight", selected ? "text-primary font-medium" : "")}>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
}
|