71 lines
2.6 KiB
Svelte
71 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
|
|
|
interface Props {
|
|
data: {
|
|
stapleCount: number;
|
|
memberCount: number;
|
|
userName: string;
|
|
};
|
|
}
|
|
|
|
let { data }: Props = $props();
|
|
</script>
|
|
|
|
<h1>Einstellungen</h1>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<!-- Card 1: Vorräte (inline, conditional content) -->
|
|
<a
|
|
href="/household/staples?ctx=settings"
|
|
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]"
|
|
>
|
|
<span class="font-[var(--font-sans)] text-[14px] font-medium">Vorräte</span>
|
|
|
|
{#if data.stapleCount > 0}
|
|
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
|
|
<span
|
|
data-testid="staple-count"
|
|
class="font-[var(--font-display)] text-[36px] leading-[1] text-[var(--green-dark)]"
|
|
>{data.stapleCount}</span>
|
|
</p>
|
|
{:else}
|
|
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
|
|
Noch keine Vorräte eingerichtet
|
|
</p>
|
|
{/if}
|
|
|
|
<span class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] mt-auto">
|
|
{#if data.stapleCount > 0}
|
|
Vorräte bearbeiten →
|
|
{:else}
|
|
Jetzt einrichten →
|
|
{/if}
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Card 2: Haushalt (inline, needs data-testid on member count) -->
|
|
<a
|
|
href="/members"
|
|
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
|
|
>
|
|
<span class="font-[var(--font-sans)] text-[14px] font-medium">Haushalt</span>
|
|
|
|
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
|
|
<span data-testid="member-count">{data.memberCount}</span> Mitglieder
|
|
</p>
|
|
|
|
<span class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] mt-auto">
|
|
Mitglieder anzeigen →
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Card 3: Profil (uses SettingsCard) -->
|
|
<SettingsCard
|
|
title="Profil"
|
|
href="/profile"
|
|
cta="Profil bearbeiten →"
|
|
meta={data.userName}
|
|
/>
|
|
</div>
|