mirror of
https://github.com/netbirdio/netbird.git
synced 2026-05-21 08:09:55 +00:00
504dceedf3
Stage 1 of the client/ui (Fyne) replacement. Adds a new client/ui-wails module that runs on Linux/macOS/Windows from a single React + Vite + Tailwind frontend driven by a thin gRPC services layer in Go. - Single-module integration (no submodule): merge Wails3 into root go.mod with build tags !android !ios !freebsd !js so cross-compiles on those targets exclude the package automatically. - Seven gRPC-bound services: Connection, Settings, Networks, Profiles, Debug, Update, Peers. Peers bridges Status polling and SubscribeEvents to the Wails event bus (netbird:status, netbird:event). - Tray + window shell mirrors the Fyne menu 1:1 with hide-on-close, SIGUSR1 / Windows named-event for external "show window" triggers. - React pages cover functional parity for Status, Settings (3 tabs), Networks (3 tabs), Profiles, Debug, Update, QuickActions, LoginUrl. - SVG-sourced tray icons (12 source SVGs incl. macOS template variants) rasterized to PNG via task common:generate:tray:icons. - Linux launcher sets WEBKIT_DISABLE_DMABUF_RENDERER=1 in the .desktop Exec= line and in task linux:run so the app renders correctly under RDP, VirtualBox, KVM, and bare WMs (Fluxbox/dwm) without DRM access.
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { cn } from "../lib/cn";
|
|
|
|
interface Props {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
label?: string;
|
|
description?: string;
|
|
}
|
|
|
|
export function Switch({ checked, onChange, disabled, label, description }: Props) {
|
|
return (
|
|
<label className={cn("flex items-start gap-3", disabled && "opacity-60")}>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={() => onChange(!checked)}
|
|
className={cn(
|
|
"mt-0.5 inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors",
|
|
checked ? "bg-netbird" : "bg-nb-gray-300 dark:bg-nb-gray-700",
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"inline-block h-4 w-4 transform rounded-full bg-white transition-transform",
|
|
checked ? "translate-x-4" : "translate-x-0.5",
|
|
)}
|
|
/>
|
|
</button>
|
|
{(label || description) && (
|
|
<span className="flex flex-col">
|
|
{label && <span className="text-sm font-medium">{label}</span>}
|
|
{description && (
|
|
<span className="text-xs text-nb-gray-500">{description}</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
</label>
|
|
);
|
|
}
|