22 lines
896 B
Svelte
22 lines
896 B
Svelte
<script lang="ts">
|
|
import RecipeCard from './RecipeCard.svelte';
|
|
import type { RecipeSummary } from './types';
|
|
|
|
let { recipes, onplan }: { recipes: RecipeSummary[]; onplan?: (recipeId: string, recipeName: string) => void } = $props();
|
|
</script>
|
|
|
|
{#if recipes.length > 0}
|
|
<div data-testid="recipe-grid" class="grid grid-cols-2 lg:grid-cols-4 gap-[8px] lg:gap-[12px] p-[16px]">
|
|
{#each recipes as recipe (recipe.id)}
|
|
<RecipeCard {recipe} compact={true} {onplan} />
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-col items-center justify-center py-[48px] px-[24px] text-center">
|
|
<p class="text-[var(--color-text-muted)] text-[14px] mb-[16px]">Noch keine Rezepte vorhanden.</p>
|
|
<a href="/recipes/new" class="font-sans text-[13px] font-medium tracking-[0.04em] rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-white">
|
|
Rezept hinzufügen
|
|
</a>
|
|
</div>
|
|
{/if}
|