feat(ui): add unified RecipeView component with tabs and portion scaling
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
314
src/lib/components/RecipeView.svelte
Normal file
314
src/lib/components/RecipeView.svelte
Normal file
@@ -0,0 +1,314 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { scaleIngredients } from '$lib/server/recipes/scaler';
|
||||||
|
import type { Recipe } from '$lib/types';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
recipe: Recipe;
|
||||||
|
showActions?: import('svelte').Snippet;
|
||||||
|
banner?: import('svelte').Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
let { recipe, showActions, banner }: Props = $props();
|
||||||
|
|
||||||
|
const defaultServings = $derived(recipe.servings_default ?? 4);
|
||||||
|
let servingsOverride = $state<number | null>(null);
|
||||||
|
const servings = $derived(servingsOverride ?? defaultServings);
|
||||||
|
const factor = $derived(servings / defaultServings);
|
||||||
|
const scaled = $derived(scaleIngredients(recipe.ingredients, factor));
|
||||||
|
|
||||||
|
let tab = $state<'ing' | 'prep'>('ing');
|
||||||
|
|
||||||
|
function decr() {
|
||||||
|
if (servings > 1) servingsOverride = servings - 1;
|
||||||
|
}
|
||||||
|
function incr() {
|
||||||
|
if (servings < 100) servingsOverride = servings + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatQty(q: number | null): string {
|
||||||
|
if (q === null) return '';
|
||||||
|
if (Number.isInteger(q)) return String(q);
|
||||||
|
return q.toLocaleString('de-DE', { maximumFractionDigits: 2 });
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeSummary(): string {
|
||||||
|
const parts: string[] = [];
|
||||||
|
if (recipe.prep_time_min) parts.push(`Vorb. ${recipe.prep_time_min} min`);
|
||||||
|
if (recipe.cook_time_min) parts.push(`Kochen ${recipe.cook_time_min} min`);
|
||||||
|
if (!recipe.prep_time_min && !recipe.cook_time_min && recipe.total_time_min)
|
||||||
|
parts.push(`Gesamt ${recipe.total_time_min} min`);
|
||||||
|
return parts.join(' · ');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if banner}
|
||||||
|
{@render banner()}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<article class="recipe">
|
||||||
|
<header class="hdr">
|
||||||
|
{#if recipe.image_path}
|
||||||
|
<img src={`/images/${recipe.image_path}`} alt="" class="cover" loading="eager" />
|
||||||
|
{/if}
|
||||||
|
<div class="hdr-body">
|
||||||
|
<h1>{recipe.title}</h1>
|
||||||
|
{#if recipe.description}
|
||||||
|
<p class="desc">{recipe.description}</p>
|
||||||
|
{/if}
|
||||||
|
<div class="meta">
|
||||||
|
{#if recipe.category}<span class="pill">{recipe.category}</span>{/if}
|
||||||
|
{#if recipe.cuisine}<span class="pill">{recipe.cuisine}</span>{/if}
|
||||||
|
{#if recipe.tags}
|
||||||
|
{#each recipe.tags.slice(0, 6) as t (t)}
|
||||||
|
<span class="tag">#{t}</span>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if timeSummary()}
|
||||||
|
<p class="times">{timeSummary()}</p>
|
||||||
|
{/if}
|
||||||
|
{#if recipe.source_url}
|
||||||
|
<p class="src">
|
||||||
|
Quelle: <a href={recipe.source_url} target="_blank" rel="noopener">{recipe.source_domain}</a>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{#if showActions}
|
||||||
|
<div class="actions">
|
||||||
|
{@render showActions()}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="tabs" role="tablist">
|
||||||
|
<button
|
||||||
|
role="tab"
|
||||||
|
aria-selected={tab === 'ing'}
|
||||||
|
class="tab"
|
||||||
|
class:active={tab === 'ing'}
|
||||||
|
onclick={() => (tab = 'ing')}
|
||||||
|
>
|
||||||
|
Zutaten
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
role="tab"
|
||||||
|
aria-selected={tab === 'prep'}
|
||||||
|
class="tab"
|
||||||
|
class:active={tab === 'prep'}
|
||||||
|
onclick={() => (tab = 'prep')}
|
||||||
|
>
|
||||||
|
Zubereitung
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if tab === 'ing'}
|
||||||
|
<section class="ingredients" role="tabpanel">
|
||||||
|
<div class="servings">
|
||||||
|
<button class="srv-btn" aria-label="Weniger" onclick={decr}>−</button>
|
||||||
|
<div class="srv-value">
|
||||||
|
<strong>{servings}</strong>
|
||||||
|
<span>{recipe.servings_unit ?? 'Portionen'}</span>
|
||||||
|
</div>
|
||||||
|
<button class="srv-btn" aria-label="Mehr" onclick={incr}>+</button>
|
||||||
|
</div>
|
||||||
|
<ul class="ing-list">
|
||||||
|
{#each scaled as ing, i (i)}
|
||||||
|
<li>
|
||||||
|
{#if ing.quantity !== null || ing.unit}
|
||||||
|
<span class="qty">
|
||||||
|
{formatQty(ing.quantity)}
|
||||||
|
{#if ing.unit}
|
||||||
|
{' '}{ing.unit}
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
<span class="name">
|
||||||
|
{ing.name}
|
||||||
|
{#if ing.note}<span class="note"> ({ing.note})</span>{/if}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
{:else}
|
||||||
|
<section class="steps" role="tabpanel">
|
||||||
|
<ol>
|
||||||
|
{#each recipe.steps as step (step.position)}
|
||||||
|
<li>{step.text}</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.recipe {
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.hdr {
|
||||||
|
margin: 0 -1rem 1rem;
|
||||||
|
}
|
||||||
|
.cover {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 10;
|
||||||
|
object-fit: cover;
|
||||||
|
background: #eef3ef;
|
||||||
|
}
|
||||||
|
.hdr-body {
|
||||||
|
padding: 1rem 1rem 0.25rem;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(1.5rem, 5.5vw, 2rem);
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0 0 0.4rem;
|
||||||
|
}
|
||||||
|
.desc {
|
||||||
|
color: #555;
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.pill {
|
||||||
|
padding: 0.15rem 0.55rem;
|
||||||
|
background: #eaf4ed;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #2b6a3d;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.times {
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
color: #666;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.src {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 0;
|
||||||
|
border-bottom: 1px solid #e4eae7;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
position: sticky;
|
||||||
|
top: 57px;
|
||||||
|
background: #f8faf8;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0.9rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
.tab.active {
|
||||||
|
color: #2b6a3d;
|
||||||
|
border-bottom-color: #2b6a3d;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.servings {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #e4eae7;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.srv-btn {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border: 1px solid #cfd9d1;
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.srv-value {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 80px;
|
||||||
|
}
|
||||||
|
.srv-value strong {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
.srv-value span {
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ing-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.ing-list li {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.7rem 0.25rem;
|
||||||
|
border-bottom: 1px solid #edf1ee;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
.qty {
|
||||||
|
min-width: 5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2b6a3d;
|
||||||
|
}
|
||||||
|
.note {
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps ol {
|
||||||
|
padding-left: 0;
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: step;
|
||||||
|
}
|
||||||
|
.steps li {
|
||||||
|
counter-increment: step;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.8rem 0 0.8rem 3rem;
|
||||||
|
border-bottom: 1px solid #edf1ee;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.steps li::before {
|
||||||
|
content: counter(step);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0.8rem;
|
||||||
|
width: 2.1rem;
|
||||||
|
height: 2.1rem;
|
||||||
|
background: #2b6a3d;
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user