58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|