Marcel Raddatz
e73a84af5f
effortMap had 'Easy'/'Medium'/'Hard' but the API returns 'easy'/'medium'/'hard', so filtering by difficulty always returned nothing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
48 lines
1.3 KiB
Svelte
48 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import FilterChipRow from '$lib/recipes/FilterChipRow.svelte';
|
|
import RecipeGrid from '$lib/recipes/RecipeGrid.svelte';
|
|
import type { RecipeSummary } from '$lib/recipes/types';
|
|
|
|
let { data }: { data: { recipes: RecipeSummary[] } } = $props();
|
|
|
|
let searchQuery = $state('');
|
|
let activeFilter = $state('Alle');
|
|
|
|
const effortMap: Record<string, string> = {
|
|
Leicht: 'easy',
|
|
Mittel: 'medium',
|
|
Schwer: 'hard'
|
|
};
|
|
|
|
let filteredRecipes = $derived(
|
|
data.recipes
|
|
.filter((r) => {
|
|
if (activeFilter === 'Alle') return true;
|
|
return r.effort === effortMap[activeFilter];
|
|
})
|
|
.filter((r) => r.name.toLowerCase().includes(searchQuery.toLowerCase()))
|
|
);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Rezepte — Mealplan</title>
|
|
</svelte:head>
|
|
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="font-[var(--font-display)] text-[28px] font-medium text-[var(--color-text)]">Rezepte</h1>
|
|
<a href="/recipes/new" class="font-sans text-[13px] font-medium tracking-[0.04em] rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-white">Rezept hinzufügen</a>
|
|
</div>
|
|
|
|
<input
|
|
type="search"
|
|
placeholder="Suchen…"
|
|
class="input"
|
|
bind:value={searchQuery}
|
|
/>
|
|
|
|
<FilterChipRow {activeFilter} onFilter={(f) => (activeFilter = f)} />
|
|
|
|
<RecipeGrid recipes={filteredRecipes} />
|
|
</div>
|