homepage/src/routes/rezepte/+page.svelte

39 lines
1.1 KiB
Svelte
Raw Normal View History

2023-06-19 00:32:51 +02:00
<script lang="ts">
2023-07-03 12:39:34 +02:00
import type { PageData } from './$types';
import MediaScroller from '$lib/components/MediaScroller.svelte';
import AddButton from '$lib/components/AddButton.svelte';
import Card from '$lib/components/Card.svelte';
import Search from '$lib/components/Search.svelte';
export let data: PageData;
export let current_month = new Date().getMonth() + 1
2023-07-13 11:50:29 +02:00
const categories = ["Hauptspeise", "Nudel", "Brot", "Dessert", "Suppe", "Beilage", "Salat", "Kuchen", "Sauce", "Zutat", "Getränk", "Aufstrich", "Guetzli"]
2023-06-19 00:32:51 +02:00
</script>
2023-06-25 10:17:12 +02:00
<style>
2023-06-25 14:42:37 +02:00
h1{
box-sizing: border-box;
2023-06-25 10:17:12 +02:00
max-width: 1000px;
2023-06-25 14:42:37 +02:00
padding-left: 5rem;
2023-06-25 10:17:12 +02:00
margin-bottom: 0;
2023-06-25 14:42:37 +02:00
font-size: 4rem;
2023-06-25 10:17:12 +02:00
}
</style>
2023-06-19 00:32:51 +02:00
<h1>Rezepte</h1>
<section>
2023-06-25 10:17:12 +02:00
<MediaScroller title="In Saison:">
2023-07-11 22:54:13 +02:00
{#each data.season as recipe}
<Card {recipe} {current_month} search=""></Card>
2023-06-19 00:32:51 +02:00
{/each}
2023-06-19 20:38:45 +02:00
</MediaScroller>
2023-06-19 00:32:51 +02:00
</section>
<Search></Search>
2023-07-03 12:39:34 +02:00
2023-07-11 22:54:13 +02:00
{#each categories as category}
2023-07-03 12:39:34 +02:00
<MediaScroller title={category}>
2023-07-11 22:54:13 +02:00
{#each data.all_brief.filter(recipe => recipe.category == category) as recipe}
2023-07-03 12:39:34 +02:00
<Card {recipe} {current_month}></Card>
2023-06-19 20:38:45 +02:00
{/each}
2023-07-03 12:39:34 +02:00
</MediaScroller>
{/each}
<p>{data.all_brief.length}</p>
<AddButton></AddButton>