Updated

frontend/pages/category.vue

@@ -6,7 +6,7 @@ import useGetCategories from "~/composables/api/product/useGetCategories";
 // state
 
 useSeoMeta({
-    title : "دسته بندی ها"
+    title: "دسته بندی ها",
 });
 
 const { data: categories, suspense } = useGetCategories();
@@ -19,9 +19,7 @@ const selectedCategory = ref("همه دسته ها");
 // computed
 
 const mainCategoriesMenu = computed(() => {
-    const categoriesList = categories.value
-        ? categories.value.map((category) => category.name)
-        : [];
+    const categoriesList = categories.value ? categories.value.map((category) => category.name) : [];
     categoriesList.unshift("همه دسته ها");
 
     return categoriesList;
@@ -36,10 +34,7 @@ const filteredCategories = computed(() => {
                     return category.name.includes(debouncedSearch.value);
                 }
 
-                return (
-                    category.name.includes(debouncedSearch.value) &&
-                    category.parent === selectedCategory.value
-                );
+                return category.name.includes(debouncedSearch.value) && category.parent === selectedCategory.value;
             });
     }
     return [];
@@ -59,16 +54,12 @@ if (response.isError) {
 
 <template>
     <div class="container">
-        <div
-            class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
-        >
+        <div class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5">
             <div class="flex flex-col items-center lg:items-start w-full">
                 <h1 class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</h1>
             </div>
 
-            <div
-                class="w-full flex items-center justify-between lg:justify-end gap-4"
-            >
+            <div class="w-full flex items-center justify-between lg:justify-end gap-4">
                 <Input
                     placeholder="جست و جو محصول ..."
                     v-model="search"
@@ -95,7 +86,10 @@ if (response.isError) {
             </div>
         </div>
 
-        <Transition name="fade" mode="out-in">
+        <Transition
+            name="fade"
+            mode="out-in"
+        >
             <div
                 v-if="filteredCategories.length > 0"
                 v-auto-animate
@@ -105,15 +99,19 @@ if (response.isError) {
                     v-for="category in filteredCategories"
                     :key="category.id"
                     :id="category.id"
+                    :slug="category.slug"
                     :category="category.name"
                     :picture="category.image"
-                    :count="20"
-                    description="یک دسته بندی تست"
+                    :count="category.product_count"
+                    :description="category.name"
                     dark-layer
                 />
             </div>
 
-            <div v-else class="flex w-full sm:mt-12">
+            <div
+                v-else
+                class="flex w-full sm:mt-12"
+            >
                 <div
                     class="flex-col flex-grow py-32 sm:py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
                 >
@@ -121,9 +119,7 @@ if (response.isError) {
                         name="bi:search"
                         class="**:fill-gray-500 size-[40px] sm:size-[50px]"
                     />
-                    <span class="text-lg text-gray-500">
-                        دسته بندی یافت نشد :(
-                    </span>
+                    <span class="text-lg text-gray-500"> دسته بندی یافت نشد :( </span>
                 </div>
             </div>
         </Transition>