Extract shared ClientsTable component and useClientRulesMap hook

2026-09-22 13:35:02 +01:00
parent c4b057ba7a
commit 4adec1700e
5 changed files with 126 additions and 204 deletions
@@ -0,0 +1,57 @@
+import ClientRow from "@/src/components/general/client-row";
+import type {
+    BUN_SQLITE_WGUI_CLIENTS,
+    BUN_SQLITE_WGUI_CLIENT_RULES,
+} from "@/db/types/db";
+
+type Props = {
+    clients: BUN_SQLITE_WGUI_CLIENTS[];
+    rules_by_client_id: Map<number, BUN_SQLITE_WGUI_CLIENT_RULES[]>;
+    accessLabel?: string;
+    minWidthClass?: string;
+};
+
+const thClass =
+    "px-4 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.08em] " +
+    "text-foreground-light/40 dark:text-foreground-dark/40 whitespace-nowrap";
+
+const thRightClass = `${thClass} text-right`;
+
+export default function ClientsTable({
+    clients,
+    rules_by_client_id,
+    accessLabel = "Access",
+    minWidthClass = "min-w-[860px]",
+}: Props) {
+    return (
+        <div className="overflow-x-auto w-full">
+            <table className={`w-full ${minWidthClass}`}>
+                <thead className="w-full">
+                    <tr className="border-y border-slate-200 dark:border-white/10 bg-foreground-light/[0.02] dark:bg-foreground-dark/[0.03] w-full">
+                        <th className={thClass}>Client</th>
+                        <th className={thClass}>Host</th>
+                        <th className={thClass}>Tunnel IP</th>
+                        <th className={thClass}>Allowed IPs</th>
+                        <th className={thClass}>{accessLabel}</th>
+                        <th className={thClass}>Public key</th>
+                        <th className={thRightClass}>Created</th>
+                        <th className={thRightClass}>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {clients.map((client) => (
+                        <ClientRow
+                            key={client.id}
+                            client={client}
+                            rules={
+                                client.id
+                                    ? rules_by_client_id.get(Number(client.id))
+                                    : undefined
+                            }
+                        />
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}