homeio

1import { ArrowDown, ArrowUp, Network } from "@/components/icons/platform-icons";
2import type { NetworkWidgetData } from "@/modules/system/components/system-widgets/types";
3import { WidgetCard } from "@/modules/system/components/system-widgets/widget-card";
4
5type NetworkCardProps = {
6  network: NetworkWidgetData;
7};
8
9export function NetworkCard({ network }: NetworkCardProps) {
10  return (
11    <WidgetCard title="Network" icon={Network}>
12      <div className="flex flex-col gap-3">
13        <div className="flex items-center justify-between">
14          <div className="flex items-center gap-2">
15            <div className="flex size-4 items-center justify-center rounded-md bg-status-green/15">
16              <ArrowDown className="size-2.5 text-status-green" />
17            </div>
18            <span className="text-xs text-muted-foreground">Download</span>
19          </div>
20          <span className="text-sm font-mono font-semibold text-status-green">
21            {network.downloadText}
22          </span>
23        </div>
24
25        <div className="flex items-center justify-between">
26          <div className="flex items-center gap-2">
27            <div className="flex size-4 items-center justify-center rounded-md bg-primary/12">
28              <ArrowUp className="size-2.5 text-primary" />
29            </div>
30            <span className="text-xs text-muted-foreground">Upload</span>
31          </div>
32          <span className="text-sm font-mono font-semibold text-primary">
33            {network.uploadText}
34          </span>
35        </div>
36
37        <div className="h-px bg-white/[0.07]" />
38
39        <DetailRow label="SSID" value={network.ssid} />
40        <DetailRow label="Interface" value={network.interfaceName} />
41        {!network.isDemoMode && (
42          <DetailRow label="Local IP" value={network.ipAddress} />
43        )}
44        <DetailRow label="Hostname" value={network.hostname} />
45      </div>
46    </WidgetCard>
47  );
48}
49
50function DetailRow({ label, value }: { label: string; value: string }) {
51  return (
52    <div className="flex items-center justify-between">
53      <span className="text-xs text-muted-foreground/70">{label}</span>
54      <span className="text-xs font-mono text-foreground/80">{value}</span>
55    </div>
56  );
57}
58