Alexander Bocken
c53aee7123
Migrate all recipe sub-pages from the old fixed-size Card component inside flex-wrap Recipes wrapper to CompactCard with responsive CSS grid for visual consistency with the main recipes page.
85 lines
3.1 KiB
Svelte
85 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
import CompactCard from '$lib/components/recipes/CompactCard.svelte';
|
|
import Search from '$lib/components/recipes/Search.svelte';
|
|
import { createSearchFilter } from '$lib/js/searchFilter.svelte';
|
|
|
|
let { data } = $props<{ data: PageData }>();
|
|
let current_month = new Date().getMonth() + 1;
|
|
|
|
const isEnglish = $derived(data.lang === 'en');
|
|
const labels = $derived({
|
|
title: isEnglish ? 'Favorites' : 'Favoriten',
|
|
pageTitle: isEnglish ? 'My Favorites - Bocken Recipes' : 'Meine Favoriten - Bocken Rezepte',
|
|
metaDescription: isEnglish
|
|
? 'My favorite recipes from Bocken\'s kitchen.'
|
|
: 'Meine favorisierten Rezepte aus der Bockenschen Küche.',
|
|
count: isEnglish
|
|
? `${data.favorites.length} favorite recipe${data.favorites.length !== 1 ? 's' : ''}`
|
|
: `${data.favorites.length} favorisierte Rezepte`,
|
|
noFavorites: isEnglish ? 'No favorites saved yet' : 'Noch keine Favoriten gespeichert',
|
|
errorLoading: isEnglish ? 'Error loading favorites:' : 'Fehler beim Laden der Favoriten:',
|
|
emptyState1: isEnglish
|
|
? 'You haven\'t saved any recipes as favorites yet.'
|
|
: 'Du hast noch keine Rezepte als Favoriten gespeichert.',
|
|
emptyState2: isEnglish
|
|
? 'Visit a recipe and click the heart icon to add it to your favorites.'
|
|
: 'Besuche ein Rezept und klicke auf das Herz-Symbol, um es zu deinen Favoriten hinzuzufügen.',
|
|
recipesLink: isEnglish ? 'recipe' : 'Rezept'
|
|
});
|
|
|
|
const { filtered: filteredFavorites, handleSearchResults } = createSearchFilter(() => data.favorites);
|
|
</script>
|
|
|
|
<style>
|
|
h1{
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
font-size: 4rem;
|
|
}
|
|
.subheading{
|
|
text-align: center;
|
|
margin-top: 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
.empty-state{
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
color: var(--nord3);
|
|
}
|
|
</style>
|
|
|
|
<svelte:head>
|
|
<title>{labels.pageTitle}</title>
|
|
<meta name="description" content={labels.metaDescription} />
|
|
</svelte:head>
|
|
|
|
<h1>{labels.title}</h1>
|
|
<p class=subheading>
|
|
{#if data.favorites.length > 0}
|
|
{labels.count}
|
|
{:else}
|
|
{labels.noFavorites}
|
|
{/if}
|
|
</p>
|
|
|
|
<Search favoritesOnly={true} lang={data.lang} recipes={data.favorites} isLoggedIn={!!data.session?.user} onSearchResults={handleSearchResults}></Search>
|
|
|
|
{#if data.error}
|
|
<p class="empty-state">{labels.errorLoading} {data.error}</p>
|
|
{:else if filteredFavorites.length > 0}
|
|
<div class="recipe-grid">
|
|
{#each filteredFavorites as recipe (recipe._id)}
|
|
<CompactCard {recipe} {current_month} isFavorite={true} showFavoriteIndicator={true} routePrefix="/{data.recipeLang}" />
|
|
{/each}
|
|
</div>
|
|
{:else if data.favorites.length > 0}
|
|
<div class="empty-state">
|
|
<p>{isEnglish ? 'No matching favorites found.' : 'Keine passenden Favoriten gefunden.'}</p>
|
|
</div>
|
|
{:else}
|
|
<div class="empty-state">
|
|
<p>{labels.emptyState1}</p>
|
|
<p><a href="/{data.recipeLang}">{labels.emptyState2}</a></p>
|
|
</div>
|
|
{/if} |