Marcel Raddatz
9bb6293d9f
- Extract RecipeSummary type to $lib/recipes/types.ts (was duplicated in 3 files) - Fix +page.svelte header link: replace Skeleton UI classes with design system tokens - Fix h1: use font-[var(--font-display)] and correct size - Fix FilterChipRow: text-[11px] → text-[13px] + tracking-[0.04em] per design system - Fix RecipeCard metadata: text-[11px] → text-[12px] for readability - Remove unused imports (vi, beforeEach, afterEach) from page.test.ts - Add combined search + effort filter test - Add reset-to-Alle filter test Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
1.6 KiB
Svelte
61 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { RecipeSummary } from './types';
|
|
|
|
let { recipe, compact = false }: { recipe: RecipeSummary; compact?: boolean } = $props();
|
|
|
|
let metadata = $derived(
|
|
[
|
|
recipe.cookTimeMin != null ? `${recipe.cookTimeMin} Min` : null,
|
|
recipe.effort ?? null
|
|
]
|
|
.filter(Boolean)
|
|
.join(' · ')
|
|
);
|
|
</script>
|
|
|
|
<a
|
|
href="/recipes/{recipe.id}"
|
|
class="block rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]"
|
|
>
|
|
<div
|
|
data-testid="image-area"
|
|
class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
|
|
>
|
|
{#if recipe.heroImageUrl}
|
|
<img src={recipe.heroImageUrl} alt={recipe.name} class="w-full h-full object-cover" />
|
|
{:else}
|
|
<div
|
|
data-testid="image-placeholder"
|
|
class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
class="text-[var(--color-text-muted)] opacity-50"
|
|
>
|
|
<!-- plate -->
|
|
<circle cx="12" cy="13" r="6" />
|
|
<path d="M12 7V5" />
|
|
<!-- fork tines -->
|
|
<path d="M8 3v3c0 1.1.9 2 2 2h4" />
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="px-2 py-1.5">
|
|
<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
|
|
{#if metadata}
|
|
<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
|
|
{/if}
|
|
</div>
|
|
</a>
|