homeio

1"use client";
2
3import { Globe, Loader2, Plug, Trash2 } from "@/components/icons/platform-icons";
4
5type ConfiguredShare = {
6  id: string;
7  host: string;
8  share: string;
9  mountPath: string;
10  isMounted: boolean;
11};
12
13type NetworkStorageGridProps = {
14  configuredShares: ConfiguredShare[];
15  discoveredServers: string[];
16  isBusy: boolean;
17  isDiscovering: boolean;
18  selectedHost: string;
19  onMount: (id: string) => void;
20  onRemove: (id: string) => void;
21  onSelectServer: (host: string) => void;
22  onUnmount: (id: string) => void;
23};
24
25export function NetworkStorageGrid({
26  configuredShares,
27  discoveredServers,
28  isBusy,
29  isDiscovering,
30  selectedHost,
31  onMount,
32  onRemove,
33  onSelectServer,
34  onUnmount,
35}: NetworkStorageGridProps) {
36  const hasContent = discoveredServers.length > 0 || configuredShares.length > 0;
37
38  if (isDiscovering && !hasContent) {
39    return (
40      <div className="flex min-h-52 items-center justify-center gap-2 text-sm text-muted-foreground">
41        <Loader2 className="size-4 animate-spin" />
42        Scanning network...
43      </div>
44    );
45  }
46
47  if (!hasContent) {
48    return (
49      <div className="flex min-h-52 flex-col items-center justify-center gap-2 text-center text-sm text-muted-foreground">
50        <Globe className="size-8 opacity-25" />
51        <span>No servers or shares found.</span>
52        <span className="text-xs opacity-60">Try rescanning the network.</span>
53      </div>
54    );
55  }
56
57  const hasDiscovered = discoveredServers.length > 0;
58  const hasConfigured = configuredShares.length > 0;
59
60  return (
61    <div className="flex flex-col gap-4">
62      {hasDiscovered && (
63        <div>
64          <p className="mb-2 text-[10px] uppercase tracking-[0.18em] text-muted-foreground/50">
65            Discovered on network
66          </p>
67          <div className="flex flex-col gap-1.5">
68            {discoveredServers.map((server) => (
69              <div
70                key={`discovered-${server}`}
71                className={`flex items-center gap-3 rounded-xl border px-3 py-2.5 transition-colors ${
72                  selectedHost === server
73                    ? "border-sky-500/40 bg-sky-500/8"
74                    : "border-glass-border bg-card/60"
75                }`}
76              >
77                <div className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-glass-border bg-background/55">
78                  <Globe className="size-4 text-sky-400" />
79                </div>
80                <div className="min-w-0 flex-1">
81                  <div className="truncate text-sm font-medium text-foreground">{server}</div>
82                  <div className="text-[10px] text-muted-foreground/60">SMB server</div>
83                </div>
84                <button
85                  type="button"
86                  onClick={() => onSelectServer(server)}
87                  disabled={isBusy}
88                  className="shrink-0 rounded-lg bg-sky-500/15 px-3 py-1.5 text-xs font-medium text-sky-400 transition-colors hover:bg-sky-500/25 disabled:cursor-not-allowed disabled:opacity-50"
89                >
90                  Use
91                </button>
92              </div>
93            ))}
94          </div>
95        </div>
96      )}
97
98      {hasConfigured && (
99        <div>
100          <p className="mb-2 text-[10px] uppercase tracking-[0.18em] text-muted-foreground/50">
101            Configured shares
102          </p>
103          <div className="flex flex-col gap-1.5">
104            {configuredShares.map((share) => (
105              <div
106                key={`configured-${share.id}`}
107                className={`flex items-center gap-3 rounded-xl border px-3 py-2.5 transition-colors ${
108                  share.isMounted
109                    ? "border-emerald-500/20 bg-card/60"
110                    : "border-glass-border bg-card/60"
111                }`}
112              >
113                <div className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-glass-border bg-background/55">
114                  <Plug className={`size-4 ${share.isMounted ? "text-emerald-400" : "text-amber-400"}`} />
115                </div>
116                <div className="min-w-0 flex-1">
117                  <div className="truncate text-sm font-medium text-foreground">
118                    {share.host}/{share.share}
119                  </div>
120                  <div className="truncate text-[10px] text-muted-foreground/60">
121                    Mounted at /{share.mountPath}
122                  </div>
123                </div>
124                <div className="flex shrink-0 items-center gap-1.5">
125                  {share.isMounted ? (
126                    <button
127                      type="button"
128                      onClick={() => onUnmount(share.id)}
129                      disabled={isBusy}
130                      className="rounded-lg bg-emerald-500/15 px-3 py-1.5 text-xs font-medium text-emerald-400 transition-colors hover:bg-emerald-500/25 disabled:cursor-not-allowed disabled:opacity-50"
131                    >
132                      Unmount
133                    </button>
134                  ) : (
135                    <button
136                      type="button"
137                      onClick={() => onMount(share.id)}
138                      disabled={isBusy}
139                      className="rounded-lg bg-amber-500/15 px-3 py-1.5 text-xs font-medium text-amber-400 transition-colors hover:bg-amber-500/25 disabled:cursor-not-allowed disabled:opacity-50"
140                    >
141                      Mount
142                    </button>
143                  )}
144                  <button
145                    type="button"
146                    onClick={() => onRemove(share.id)}
147                    disabled={isBusy}
148                    className="flex size-7 items-center justify-center rounded-lg text-muted-foreground/40 transition-colors hover:bg-status-red/10 hover:text-status-red disabled:cursor-not-allowed disabled:opacity-50"
149                    aria-label="Remove share"
150                  >
151                    <Trash2 className="size-3.5" />
152                  </button>
153                </div>
154              </div>
155            ))}
156          </div>
157        </div>
158      )}
159    </div>
160  );
161}
162