Merge pull request #84 from Nicolhetti/main

Enhancement: Clickable Tags in Header Component

Author: nurRiyad

components/blog/Header.vue

@@ -43,9 +43,12 @@ 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>