add category topic page

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/category/card.vue

@@ -27,7 +27,7 @@ const randbgcolor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <template>
   <div class="text-white px-5 py-3 rounded hover:underline randbgcolor">
-    <NuxtLink to="/" class="text-xl font-extrabold">
+    <NuxtLink :to="`/categories/${title}`" class="text-xl font-extrabold">
       <h1>#{{ title }}</h1>
     </NuxtLink>
   </div>

components/category/topic.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="container mx-auto">
+    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200">
+      <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
+        #{{ $route.params.category }}
+      </h1>
+    </div>
+  </div>
+</template>

pages/categories/[category].vue

@@ -1,5 +1,23 @@
+<script lang="ts" setup>
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      name: 'description',
+      content: 'Home',
+    },
+  ],
+  titleTemplate: "Elon's Blog - %s",
+})
+const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
+</script>
 <template>
-  <div>
-    <h1>Categories</h1>
+  <main class="container max-w-5xl mx-auto text-zinc-600">
+    <CategoryTopic />
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      <template v-for="n in data" :key="n">
+        <BlogCard :title="n.title || ''" :excerpt="n.description" image="sdlfkj" :slug="n._path" />
+      </template>
     </div>
+  </main>
 </template>