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