Marcel Raddatz
f11cca534f
Adds Thumbnailator-based ImageCompressor that resizes uploaded images to a 400px-wide JPEG preview stored in hero_image_preview. The recipe list uses the preview instead of the full image URL. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
78 lines
2.3 KiB
Svelte
78 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import type { RecipeSummary } from './types';
|
|
|
|
let { recipe, compact = false, onplan }: {
|
|
recipe: RecipeSummary;
|
|
compact?: boolean;
|
|
onplan?: ((recipeId: string, recipeName: string) => void);
|
|
} = $props();
|
|
|
|
let metadata = $derived(
|
|
[
|
|
recipe.cookTimeMin != null ? `${recipe.cookTimeMin} Min` : null,
|
|
recipe.effort ?? null
|
|
]
|
|
.filter(Boolean)
|
|
.join(' · ')
|
|
);
|
|
</script>
|
|
|
|
<div class="rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]">
|
|
<a href="/recipes/{recipe.id}" class="block">
|
|
<div
|
|
data-testid="image-area"
|
|
class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
|
|
>
|
|
{#if recipe.heroImagePreview}
|
|
<img src={recipe.heroImagePreview} 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>
|
|
|
|
{#if onplan}
|
|
<div class="flex gap-[5px] px-2 pb-2">
|
|
<a
|
|
href="/cook/{recipe.id}"
|
|
class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green)] text-white"
|
|
>🍳 Jetzt kochen</a>
|
|
<button
|
|
type="button"
|
|
onclick={() => onplan!(recipe.id, recipe.name)}
|
|
class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green-tint)] text-[var(--green-dark)] border border-[var(--green-light)]"
|
|
>📅 Zur Woche +</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|