From 52858e46ffe34d83650f96adafb073020ba3ee7b Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Fri, 14 Jul 2023 14:33:06 +0200
Subject: [PATCH] active season/icon highlighted insteas of using text

---
 src/lib/components/IconLayout.svelte           | 10 ++++++----
 src/lib/components/SeasonLayout.svelte         | 16 +++++++++-------
 src/routes/rezepte/icon/[icon]/+page.svelte    |  3 +--
 src/routes/rezepte/season/+page.svelte         |  3 +--
 src/routes/rezepte/season/[month]/+page.svelte |  3 +--
 5 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/IconLayout.svelte b/src/lib/components/IconLayout.svelte
index 97cfbac..d650ba7 100644
--- a/src/lib/components/IconLayout.svelte
+++ b/src/lib/components/IconLayout.svelte
@@ -3,6 +3,7 @@
     import Recipes from '$lib/components/Recipes.svelte';
     import Search from './Search.svelte';
     export let icons
+    export let active_icon
 </script>
 
 <style>
@@ -15,10 +16,12 @@
     		box-shadow: 0em 0em 0.5em 0.2em rgba(0, 0, 0, 0.2);
 	}
 	a:hover,
-	a:focus-visible
+	a:focus-visible,
+	.active
 	{
 		--angle: 15deg;
 		animation: shake 0.5s ease forwards;
+		background-color: var(--nord2);
 	}
 	.flex{
 		display:flex;
@@ -61,11 +64,10 @@
   }
 
 </style>
-<slot name="test"></slot>
 
 <div class=flex>
-{#each icons as icon}
-	<a href="/rezepte/icon/{icon}">{icon}</a>
+{#each icons as icon, i}
+	<a class:active={active_icon == icon} href="/rezepte/icon/{icon}">{icon}</a>
 {/each}
 </div>
 <section>
diff --git a/src/lib/components/SeasonLayout.svelte b/src/lib/components/SeasonLayout.svelte
index e3f4f96..ee36776 100644
--- a/src/lib/components/SeasonLayout.svelte
+++ b/src/lib/components/SeasonLayout.svelte
@@ -4,8 +4,10 @@
     import Search from './Search.svelte';
     let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
     let month : number;
-</script>
+    export let active_index;
+    console.log(active_index)
 
+</script>
 <style>
 a.month{
 	text-decoration: unset;
@@ -18,9 +20,11 @@ a.month{
 	min-width: 4em;
 	text-align: center;
 }
-a.month:hover{
-	transform: scale(1.1,1.1);
-	background-color: var(--red);
+a.month:hover,
+.active
+{
+	transform: scale(1.1,1.1) !important;
+	background-color: var(--red) !important;
 }
 .months{
 	display:flex;
@@ -32,11 +36,9 @@ a.month:hover{
 }
 </style>
 
-<slot name="test"></slot>
-
 <div class=months>
 {#each months as month, i}
-	<a class=month href="/rezepte/season/{i+1}">{month}</a>
+	<a class:active={i == active_index}  class=month href="/rezepte/season/{i+1}">{month}</a>
 {/each}
 </div>
 <section>
diff --git a/src/routes/rezepte/icon/[icon]/+page.svelte b/src/routes/rezepte/icon/[icon]/+page.svelte
index 91e596d..75d8167 100644
--- a/src/routes/rezepte/icon/[icon]/+page.svelte
+++ b/src/routes/rezepte/icon/[icon]/+page.svelte
@@ -8,8 +8,7 @@
     export let data: PageData;
     import { rand_array } from '$lib/js/randomize';
 </script>
-<IconLayout icons={data.icons}>
-<h2 slot=test>Rezepte mit {data.icon}</h2>
+<IconLayout icons={data.icons} active_icon={data.icon} >
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} icon_override=true></Card>
diff --git a/src/routes/rezepte/season/+page.svelte b/src/routes/rezepte/season/+page.svelte
index 51fdb2b..78a02ae 100644
--- a/src/routes/rezepte/season/+page.svelte
+++ b/src/routes/rezepte/season/+page.svelte
@@ -11,8 +11,7 @@
     import { rand_array } from '$lib/js/randomize';
 </script>
 
-<SeasonLayout>
-<h2 slot=test>Rezepte des Monats </h2>
+<SeasonLayout active_index={current_month-1}>
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} {current_month}></Card>
diff --git a/src/routes/rezepte/season/[month]/+page.svelte b/src/routes/rezepte/season/[month]/+page.svelte
index 16ddb09..63eb132 100644
--- a/src/routes/rezepte/season/[month]/+page.svelte
+++ b/src/routes/rezepte/season/[month]/+page.svelte
@@ -9,8 +9,7 @@
     let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
     import { rand_array } from '$lib/js/randomize';
 </script>
-<SeasonLayout>
-<h2 slot=test>Rezepte die im {months[data.month-1]} in Saison sind</h2>
+<SeasonLayout active_index={data.month -1}>
 <Recipes slot=recipes>
 	{#each rand_array(data.season) as recipe}
 		<Card {recipe} icon_override=true></Card>