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>

app/components/category/hero.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { categoryPage } from '~/data'
+import { categoryPage } from "~/data";
 </script>
 
 <template>
@@ -7,8 +7,7 @@ import { categoryPage } from '~/data'
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
         <h1
-          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5"
-        >
+          class="text-black dark:text-zinc-300 font-semibold leading-tight text-4xl md:text-5xl my-5">
           {{ categoryPage.title }}
         </h1>
         <p class="dark:text-zinc-300">

app/components/category/topic.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { makeFirstCharUpper } from '@/utils/helper'
+import { makeFirstCharUpper } from "@/utils/helper";
 
-const route = useRoute()
+const route = useRoute();
 
 // take category from route params & make first char upper
 const category = computed(() => {
-  const name = route.params.category || ''
-  let strName = ''
+  const name = route.params.category || "";
+  let strName = "";
 
-  if (Array.isArray(name)) strName = name.at(0) || ''
-  else strName = name
-  return makeFirstCharUpper(strName)
-})
+  if (Array.isArray(name)) strName = name.at(0) || "";
+  else strName = name;
+  return makeFirstCharUpper(strName);
+});
 </script>
 
 <template>