47 lines
1.4 KiB
Svelte
47 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import * as Table from '$lib/components/ui/table';
|
|
import { Badge } from '$lib/components/ui/badge';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import type { PageData } from './$types';
|
|
import { LucidePlus } from 'lucide-svelte';
|
|
|
|
const { data }: { data: PageData } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Clients</title>
|
|
</svelte:head>
|
|
|
|
<Table.Root class="bg-accent rounded-xl">
|
|
<Table.Header>
|
|
<Table.Head>Name</Table.Head>
|
|
<Table.Head>Public Key</Table.Head>
|
|
<Table.Head>Private Key</Table.Head>
|
|
<Table.Head>Pre-Shared Key</Table.Head>
|
|
<Table.Head>IP Allocation</Table.Head>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{#each data.clients as client}
|
|
<Table.Row class="border-y-2 border-background">
|
|
<Table.Cell>{client.name}</Table.Cell>
|
|
<Table.Cell class="truncate max-w-[10ch]">{client.publicKey}</Table.Cell>
|
|
<Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>
|
|
<Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>
|
|
<Table.Cell class="flex gap-1">
|
|
{#each client.ips as ip}
|
|
<Badge class="bg-background select-auto" variant="secondary">{ip}</Badge>
|
|
{/each}
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{/each}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
|
|
<!--Floating action button for adding a new client-->
|
|
<form class="self-end mt-auto pt-4" method="post" action="?/create">
|
|
<Button type="submit">
|
|
<LucidePlus />
|
|
Add Client
|
|
</Button>
|
|
</form>
|