first working prototype

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    export let data: PageData;
+    import TagCloud from '$lib/components/TagCloud.svelte';
+    import TagBall from '$lib/components/TagBall.svelte';
+</script>
+<h1>Rezepte</h1>
+<h2>Kategorien</h2>
+<section>
+<TagCloud>
+{#each data.categories as tag}
+	<TagBall {tag} ref="/rezepte/category">
+	</TagBall>
+{/each}
+</TagCloud>
+</section>

src/routes/rezepte/category/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch}) {
+    const res = await fetch(`/api/items/category`);
+    const categories= await res.json();
+    return {categories}
+};

src/routes/rezepte/category/[category]/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { PageData } from './$types';
+    import '$lib/components/card.css';
+    import Recipes from '$lib/components/Recipes.svelte';
+    export let data: PageData;
+    export let current_month = new Date().getMonth() + 1;
+    import Card from '$lib/components/Card.svelte'
+</script>
+<h1>Rezepte</h1>
+<h2>In Kategorie {data.category}</h2>
+<section>
+<Recipes>
+	{#each data.recipes as recipe}
+		<Card {recipe} {current_month}></Card>
+	{/each}
+</Recipes>
+</section>

src/routes/rezepte/category/[category]/+page.ts

@@ -0,0 +1,10 @@
+import type { PageLoad } from "./$types";
+
+export async function load({ fetch, params }) {
+    const res = await fetch(`/api/items/category/${params.category}`);
+    const items = await res.json();
+    return {
+	    category: params.category,
+	    recipes: items
+    }
+};