From 0e5bdbb2c61141c536c85a10aba7f20da1ee44d8 Mon Sep 17 00:00:00 2001
From: nicolasimanolmedina <nicolasimanolmedina@gmail.com>
Date: Sat, 22 Mar 2025 23:34:12 +0000
Subject: [PATCH 1/2] Make tags clickable and redirect to respective categories
 in Header.vue

---
 components/blog/Header.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/blog/Header.vue b/components/blog/Header.vue
index d628fd0..e26a54d 100644
--- a/components/blog/Header.vue
+++ b/components/blog/Header.vue
@@ -43,9 +43,11 @@ withDefaults(defineProps<Props>(), {
         <div class="flex items-center gap-2 flex-wrap my-5">
           <LogoTag />
           <template v-for="tag in tags" :key="tag">
-            <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold">{{
-              tag
-            }}</span>
+            <NuxtLink :to="`/categories/${tag.toLocaleLowerCase()}`">
+              <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold hover:bg-gray-300 dark:hover:bg-slate-800 transition-colors duration-200">{{
+                tag
+              }}</span>
+            </NuxtLink>
           </template>
         </div>
       </div>

From 72294f15810c1bd07cc1ccc0ca7639a3d8b811a1 Mon Sep 17 00:00:00 2001
From: nicolasimanolmedina <nicolasimanolmedina@gmail.com>
Date: Sat, 22 Mar 2025 23:52:38 +0000
Subject: [PATCH 2/2] Formatted Header.vue Code

---
 components/blog/Header.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/blog/Header.vue b/components/blog/Header.vue
index e26a54d..80fc31a 100644
--- a/components/blog/Header.vue
+++ b/components/blog/Header.vue
@@ -44,9 +44,10 @@ withDefaults(defineProps<Props>(), {
           <LogoTag />
           <template v-for="tag in tags" :key="tag">
             <NuxtLink :to="`/categories/${tag.toLocaleLowerCase()}`">
-              <span class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold hover:bg-gray-300 dark:hover:bg-slate-800 transition-colors duration-200">{{
-                tag
-              }}</span>
+              <span
+                class="bg-gray-200 dark:bg-slate-900 rounded-md px-2 py-1 font-semibold hover:bg-gray-300 dark:hover:bg-slate-800 transition-colors duration-200"
+                >{{ tag }}</span
+              >
             </NuxtLink>
           </template>
         </div>