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>
34 lines
886 B
Svelte
34 lines
886 B
Svelte
<script lang="ts">
|
|
import type { Step } from './types';
|
|
|
|
let { steps }: { steps: Step[] } = $props();
|
|
|
|
const sortedSteps = $derived(
|
|
[...steps].sort((a, b) => (a.stepNumber ?? 0) - (b.stepNumber ?? 0))
|
|
);
|
|
</script>
|
|
|
|
<section>
|
|
<h2
|
|
class="text-[12px] font-medium font-sans tracking-[0.08em] uppercase text-[var(--color-text-muted)] mb-[16px]"
|
|
>
|
|
Zubereitung
|
|
</h2>
|
|
<ol>
|
|
{#each sortedSteps as step (step.stepNumber)}
|
|
<li class="flex gap-[16px] items-start mb-[20px]">
|
|
<div
|
|
data-testid="step-circle"
|
|
aria-hidden="true"
|
|
class="w-[28px] h-[28px] rounded-full bg-[var(--green-dark)] text-white flex items-center justify-center shrink-0 font-sans text-[13px] font-medium"
|
|
>
|
|
{step.stepNumber}
|
|
</div>
|
|
<p class="text-[14px] text-[var(--color-text)] leading-[1.6] pt-[4px]">
|
|
{step.instruction}
|
|
</p>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
</section>
|