Make tags clickable and redirect to respective categories in Header.vue

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">{{
+            <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>