homeio

1"use client";
2
3import { InfoBanner, SectionDivider } from "@/modules/settings/components/panel/controls";
4import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
5import type { SettingsBackend } from "@/modules/settings/components/panel/types";
6import { cn } from "@/lib/utils";
7
8type NetworkSectionProps = {
9  data: SettingsBackend["network"];
10};
11
12function InfoRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
13  return (
14    <div className="flex items-center justify-between gap-4 py-2.5">
15      <span className="text-xs text-muted-foreground">{label}</span>
16      <span className={cn("truncate text-right text-xs font-medium text-foreground", mono && "font-mono")}>
17        {value}
18      </span>
19    </div>
20  );
21}
22
23export function NetworkSection({ data }: NetworkSectionProps) {
24  const isEthernet = data.connected && data.ssid === "--";
25
26  return (
27    <div className="flex flex-col gap-1">
28      {data.warning && (
29        <InfoBanner text={data.warning} variant={data.unavailable ? "warning" : "info"} />
30      )}
31
32      <SectionDivider title="Interface" />
33      <div className={cn(SETTINGS_PANEL_INSET, "overflow-hidden")}>
34        {/* Status header */}
35        <div className="flex items-center justify-between px-4 py-3">
36          <div className="flex items-center gap-2.5">
37            <div className={cn(
38              "size-2 rounded-full",
39              data.connected ? "bg-status-green" : "bg-muted-foreground/40",
40            )} />
41            <span className="text-sm font-medium text-foreground">{data.iface}</span>
42            <span className="text-xs text-muted-foreground">
43              {data.connected ? "Connected" : "Disconnected"}
44            </span>
45          </div>
46          <span className="font-mono text-xs text-muted-foreground">
47            {isEthernet ? "Ethernet" : `Signal ${data.signalPercent}`}
48          </span>
49        </div>
50
51        {/* Detail rows */}
52        <div className="divide-y divide-glass-border/50 border-t border-glass-border/50 px-4">
53          <InfoRow label="IPv4 Address" value={data.ipv4} mono />
54          {isEthernet ? (
55            <InfoRow label="Connection type" value="Wired Ethernet" />
56          ) : (
57            <>
58              <InfoRow label="SSID" value={data.ssid} mono />
59              <InfoRow label="Nearby networks" value={String(data.wifiCount)} />
60              {data.topSsids.length > 0 && (
61                <div className="py-2.5">
62                  <span className="text-xs text-muted-foreground">Nearby SSIDs</span>
63                  <div className="mt-1 flex flex-wrap gap-1.5">
64                    {data.topSsids.map((ssid) => (
65                      <span
66                        key={ssid}
67                        className="rounded-md border border-glass-border bg-background/50 px-2 py-0.5 font-mono text-[11px] text-foreground/80"
68                      >
69                        {ssid}
70                      </span>
71                    ))}
72                  </div>
73                </div>
74              )}
75            </>
76          )}
77        </div>
78      </div>
79
80      <SectionDivider title="Advanced" />
81      <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-3")}>
82        <p className="text-xs text-muted-foreground">
83          Gateway, DNS, DHCP, IPv6, MTU, and Wake-on-LAN configuration is coming in a future update.
84        </p>
85      </div>
86    </div>
87  );
88}
89