46 lines
1.4 KiB
Svelte
46 lines
1.4 KiB
Svelte
<svelte:head>
|
|
<title>Vorräte einrichten — Mealplan</title>
|
|
</svelte:head>
|
|
|
|
<script lang="ts">
|
|
import ProgressSidebar from '$lib/components/ProgressSidebar.svelte';
|
|
import StaplesManager from '$lib/onboarding/StaplesManager.svelte';
|
|
|
|
type Category = { id: string; name: string; ingredients: { id: string; name: string; isStaple: boolean }[] };
|
|
|
|
let { data, ctx }: { data: { categories: Category[] }; ctx?: string } = $props();
|
|
|
|
const isOnboarding = $derived(ctx === 'onboarding');
|
|
</script>
|
|
|
|
{#if isOnboarding}
|
|
<div class="flex min-h-screen bg-[var(--color-page)]">
|
|
<!-- Desktop sidebar -->
|
|
<aside class="hidden md:flex w-[300px] flex-shrink-0 flex-col bg-[var(--color-surface)] border-r border-[var(--color-border)] p-[40px_28px]">
|
|
<ProgressSidebar currentStep={2} />
|
|
</aside>
|
|
|
|
<!-- Main area -->
|
|
<main class="flex flex-1 flex-col">
|
|
<!-- Mobile step indicator -->
|
|
<p class="md:hidden px-6 pt-6 text-sm text-[var(--color-text-muted)]">Schritt 2 von 3</p>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 p-6">
|
|
<StaplesManager categories={data.categories} context="onboarding" />
|
|
</div>
|
|
|
|
<!-- Footer navigation -->
|
|
<div class="flex justify-between p-6">
|
|
<a href="/planner">Überspringen</a>
|
|
<a href="/household/invite">Weiter</a>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{:else}
|
|
<div class="flex min-h-screen flex-col bg-[var(--color-page)]">
|
|
<h1>Vorräte</h1>
|
|
<StaplesManager categories={data.categories} context="settings" />
|
|
</div>
|
|
{/if}
|