108 lines
3.9 KiB
Svelte
108 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
|
|
let { data } = $props();
|
|
|
|
let searchTimeout: ReturnType<typeof setTimeout>;
|
|
|
|
function handleSearch(e: Event) {
|
|
const value = (e.target as HTMLInputElement).value;
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
goto(`/persons?q=${value}`, { keepFocus: true });
|
|
}, 300);
|
|
}
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
|
|
<!-- Header Area -->
|
|
<div
|
|
class="mb-10 flex flex-col justify-between gap-6 border-b border-brand-navy/10 pb-6 md:flex-row md:items-end"
|
|
>
|
|
<div>
|
|
<h1 class="font-serif text-3xl font-medium text-brand-navy">Personenverzeichnis</h1>
|
|
<p class="mt-2 max-w-xl font-sans text-sm text-brand-navy/60">
|
|
Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.
|
|
</p>
|
|
<a
|
|
href="/persons/new"
|
|
class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
|
|
>
|
|
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg" alt="" aria-hidden="true" class="h-4 w-4" />
|
|
Neue Person
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Search Input -->
|
|
<div class="w-full md:w-80">
|
|
<label for="search" class="sr-only">Suche</label>
|
|
<div class="relative">
|
|
<input
|
|
id="search"
|
|
type="text"
|
|
placeholder="Namen suchen..."
|
|
value={data.q || ''}
|
|
oninput={handleSearch}
|
|
class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 font-sans text-sm text-brand-navy placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
|
|
>
|
|
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg" alt="" aria-hidden="true" class="h-4 w-4 opacity-40" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if data.persons.length === 0}
|
|
<div
|
|
class="flex flex-col items-center justify-center rounded-lg border border-dashed border-brand-sand bg-white py-16 text-center"
|
|
>
|
|
<div
|
|
class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
|
|
>
|
|
<img src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg" alt="" aria-hidden="true" class="h-6 w-6" />
|
|
</div>
|
|
<p class="font-serif text-lg text-brand-navy">Keine Personen gefunden.</p>
|
|
<p class="mt-1 font-sans text-sm text-gray-500">Versuchen Sie einen anderen Suchbegriff.</p>
|
|
</div>
|
|
{:else}
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
|
|
{#each data.persons as person}
|
|
<a href="/persons/{person.id}" class="group block h-full">
|
|
<div
|
|
class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-brand-sand bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
|
|
>
|
|
<!-- Decorative Accent on Hover -->
|
|
<div
|
|
class="absolute top-0 bottom-0 left-0 w-1 bg-brand-navy opacity-0 transition-opacity group-hover:opacity-100"
|
|
></div>
|
|
|
|
<!-- Avatar -->
|
|
<div class="flex-shrink-0">
|
|
<div
|
|
class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-navy font-serif text-lg text-white transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
|
|
>
|
|
{person.firstName[0]}{person.lastName[0]}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="min-w-0 flex-1">
|
|
<p
|
|
class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
|
|
>
|
|
{person.firstName}
|
|
{person.lastName}
|
|
</p>
|
|
{#if person.alias}
|
|
<p class="mt-0.5 truncate font-sans text-xs text-gray-500">"{person.alias}"</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|