make tags page dynamic

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

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>