Marcel Raddatz
0256b4360b
- RecipeHero: render tag pills, min-h-[200px/240px], fix back link styling, remove font-[400] - IngredientList: sort by sortOrder ascending - StepList: aria-hidden on step circles - types.ts: add Tag, Ingredient, Step, RecipeDetail shared types - +page.svelte: add Edit link → /recipes/[id]/edit (desktop topbar) - Tests: tag pills, sortOrder sort, edit link, image variant, 403-as-404 documented Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
35 lines
1.1 KiB
Svelte
35 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import RecipeHero from '$lib/recipes/RecipeHero.svelte';
|
|
import IngredientList from '$lib/recipes/IngredientList.svelte';
|
|
import StepList from '$lib/recipes/StepList.svelte';
|
|
import type { RecipeDetail } from '$lib/recipes/types';
|
|
|
|
let { data }: { data: { recipe: RecipeDetail } } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{data.recipe.name} — Mealplan</title>
|
|
</svelte:head>
|
|
|
|
<div>
|
|
<div class="hidden md:flex items-center justify-end px-[24px] py-[12px] border-b border-[var(--color-border)]">
|
|
<a
|
|
href="/recipes/{data.recipe.id}/edit"
|
|
class="border border-[var(--color-border)] text-[var(--color-text)] text-[13px] font-medium font-sans tracking-[0.04em] rounded-[var(--radius-md)] px-[16px] py-[8px]"
|
|
>
|
|
Bearbeiten
|
|
</a>
|
|
</div>
|
|
|
|
<RecipeHero recipe={data.recipe} />
|
|
|
|
<div class="md:flex">
|
|
<div class="md:flex-1 md:border-r md:border-[var(--color-border)] p-[24px]">
|
|
<IngredientList ingredients={data.recipe.ingredients} />
|
|
</div>
|
|
<div class="md:flex-1 p-[24px]">
|
|
<StepList steps={data.recipe.steps} />
|
|
</div>
|
|
</div>
|
|
</div>
|