Marcel Raddatz
e3f8d8ad73
Three-breakpoint layout (mobile/tablet/desktop) with VarietyScoreCard, WeekStrip, DayMealCard components. Server loads week plan and variety score via API; read-only role behavior derived from benutzer.rolle. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
63 lines
1.7 KiB
Svelte
63 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
interface IngredientOverlap {
|
|
ingredientName?: string;
|
|
days?: string[];
|
|
}
|
|
|
|
let {
|
|
score,
|
|
ingredientOverlaps = [],
|
|
showReviewLink = false
|
|
}: {
|
|
score: number;
|
|
ingredientOverlaps?: IngredientOverlap[];
|
|
showReviewLink?: boolean;
|
|
} = $props();
|
|
|
|
let percentage = $derived(Math.round((score / 10) * 100));
|
|
</script>
|
|
|
|
<div class="rounded-[var(--radius-lg)] border border-[var(--yellow-light)] bg-[var(--yellow-tint)] p-4">
|
|
<div class="flex items-baseline gap-1">
|
|
<span class="font-[var(--font-display)] text-[28px] font-[300] text-[var(--color-text)] md:text-[40px]">
|
|
{score}
|
|
</span>
|
|
<span class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">/10</span>
|
|
<span class="ml-1 font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">Abwechslungs-Score</span>
|
|
</div>
|
|
|
|
<!-- Progress bar -->
|
|
<div
|
|
class="mt-2 h-[4px] w-full overflow-hidden rounded-full bg-[var(--yellow-light)]"
|
|
>
|
|
<div
|
|
role="progressbar"
|
|
aria-valuenow={score}
|
|
aria-valuemin={0}
|
|
aria-valuemax={10}
|
|
class="h-full rounded-full bg-[var(--yellow)] transition-all"
|
|
style="width: {percentage}%"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Ingredient overlap warnings -->
|
|
{#if ingredientOverlaps.length > 0}
|
|
<ul class="mt-3 space-y-1">
|
|
{#each ingredientOverlaps as overlap}
|
|
<li class="font-[var(--font-sans)] text-[12px] text-[var(--yellow-text)]">
|
|
⚠ <span>{overlap.ingredientName}</span> in <span>{overlap.days?.length ?? 0} Mahlzeiten</span>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
|
|
{#if showReviewLink}
|
|
<a
|
|
href="/planner/variety"
|
|
class="mt-3 block font-[var(--font-sans)] text-[12px] font-medium text-[var(--yellow-text)] hover:underline"
|
|
>
|
|
Variety überprüfen →
|
|
</a>
|
|
{/if}
|
|
</div>
|