Generate category from blog post tag

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

components/category/card.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 interface Props {
   title: string
+  count: number
 }
 
 withDefaults(defineProps<Props>(), {
   title: 'No title available',
+  count: 0,
 })
 
 // some random color for tags
@@ -37,7 +39,7 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
     rand-bg-color hover:scale-[1.05] transition-all duration-500"
   >
     <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
-      <h1>#{{ title }}</h1>
+      <h1>#{{ title }}({{ count }})</h1>
     </NuxtLink>
   </div>
 </template>

components/category/hero.vue

@@ -6,8 +6,7 @@
           Categories
         </h1>
         <p class="dark:text-zinc-300">
-          Blow All the topics are listed on which either I have written a blog or will write a blog
-          in near future.
+          Blow this category is generated from all the tags are mentioned in the different blog post
         </p>
       </div>
       <div class="px-6 justify-self-center">

components/category/topic.vue

@@ -17,7 +17,7 @@ const category = computed(() => {
 
 <template>
   <div class="container mx-auto">
-    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-slate-900">
+    <div class="p-6 my-4 mx-2 rounded-md bg-gray-200 dark:bg-slate-900">
       <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
         #{{ category }}
       </h1>