update

app/components/category/card.vue

@@ -1,42 +1,41 @@
 <script setup lang="ts">
 interface Props {
-  title: string
-  count: number
+  title: string;
+  count: number;
 }
 
 withDefaults(defineProps<Props>(), {
-  title: 'No title available',
+  title: "No title available",
   count: 0,
-})
+});
 
 // some random color for tags
 const color = [
-  '#dc2626',
-  '#d97706',
-  '#65a30d',
-  '#059669',
-  '#0891b2',
-  '#0284c7',
-  '#4f46e5',
-  '#7c3aed',
-  '#c026d3',
-  '#db2777',
-]
+  "#dc2626",
+  "#d97706",
+  "#65a30d",
+  "#059669",
+  "#0891b2",
+  "#0284c7",
+  "#4f46e5",
+  "#7c3aed",
+  "#c026d3",
+  "#db2777",
+];
 
 // get a random number
 function getRandomInt(min: number, max: number) {
-  min = Math.ceil(min)
-  max = Math.floor(max)
-  return Math.floor(Math.random() * (max - min + 1)) + min
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
+const picAColor = ref(`${color.at(getRandomInt(0, 8))}`);
 </script>
 
 <template>
   <div
-    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500"
-  >
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500">
     <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
       <h1>#{{ title }}({{ count }})</h1>
     </NuxtLink>