make tags page dynamic

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

components/CategoryCard.vue

@@ -1,10 +1,18 @@
+<script setup lang="ts">
+const props = defineProps({
+  type: String,
+  count: Number,
+  path: String,
+});
+</script>
+
 <template>
   <div
     class="basis-1/5 bg-white mx-5 my-2 p-5 rounded-md shadow-lg max-w-[530px] group text-slate-800"
   >
-    <nuxt-link to="/category/js" class="group-hover:text-sky-500">
+    <nuxt-link :to="`/tags/${path}`" class="group-hover:text-sky-500">
       <div class="flex items-center">
-        <h4 class="text-2xl font-medium py-1">Typescript</h4>
+        <h4 class="text-2xl font-medium py-1">{{ type }}</h4>
       </div>
     </nuxt-link>
 
@@ -13,10 +21,10 @@
       <div class="text-sm">
         <icon calss="bg-red" name="ant-design:arrow-right-outlined" />
       </div>
-      <p>433</p>
+      <p>{{ count }}</p>
     </div>
 
-    <nuxt-link class="group-hover:text-sky-500" to="/">
+    <nuxt-link class="group-hover:text-sky-500" :to="`/tags/${path}`">
       <p class="font-medium text-sm">
         Read All Post <span class="hidden group-hover:inline"> ->> </span>
       </p>

pages/tags/index.vue

@@ -3,6 +3,25 @@ definePageMeta({
   layout: "list",
 });
 const { data } = await useAsyncData("home", () => queryContent("/").find());
+
+const getTopCategory = computed(() => {
+  const allpost = data.value || [];
+  const alltypes = allpost.map((post) => post.type);
+  const uniqType = new Set(alltypes);
+  const cobj = <Array<{ type: string; count: number; path: string }>>[];
+  uniqType.forEach((type) => {
+    const filterwithType = allpost.filter((post) => post.type === type);
+
+    const path = filterwithType[0]._path?.split("/").at(1);
+    cobj.push({
+      type: type,
+      count: filterwithType.length || 0,
+      path: path || "",
+    });
+  });
+
+  return cobj;
+});
 </script>
 
 <template>
@@ -11,7 +30,9 @@ const { data } = await useAsyncData("home", () => queryContent("/").find());
       ALL TAGS
     </h1>
     <div class="flex justify-start flex-wrap">
-      <category-card v-for="n in 20" :key="n" />
+      <template v-for="ct in getTopCategory" :key="ct">
+        <category-card :type="ct.type" :count="ct.count" :path="ct.path" />
+      </template>
     </div>
   </div>
 </template>