From acac2aff61a7f2ac49d223f3d863ac17d90dd272 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Sun, 8 Jan 2023 22:12:33 +0600
Subject: [PATCH] add category topic page

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/category/card.vue    |  2 +-
 components/category/topic.vue   |  9 +++++++++
 pages/categories/[category].vue | 24 +++++++++++++++++++++---
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 components/category/topic.vue

diff --git a/components/category/card.vue b/components/category/card.vue
index 67d8756..b015b8b 100644
--- a/components/category/card.vue
+++ b/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>
diff --git a/components/category/topic.vue b/components/category/topic.vue
new file mode 100644
index 0000000..76f0407
--- /dev/null
+++ b/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>
diff --git a/pages/categories/[category].vue b/pages/categories/[category].vue
index fd0f4b5..7c1d40f 100644
--- a/pages/categories/[category].vue
+++ b/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>
-  </div>
+  <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>