Updated

frontend/pages/category.vue

@@ -17,11 +17,12 @@ const filteredCategories = computed(() => {
 
     if (debouncedSearch.value.length > 0) {
         return categories.value!.map((cat) => {
-            cat.subcategorys = cat.subcategorys.filter((subcat) => {
+            const copyOfCategory = { ...cat };
+            copyOfCategory.subcategorys = copyOfCategory.subcategorys.filter((subcat) => {
                 return subcat.name.includes(debouncedSearch.value);
             });
 
-            return cat;
+            return copyOfCategory;
         });
     }
 
@@ -66,32 +67,43 @@ await useAsyncData(async () => {
             </Input>
         </div>
         <Transition name="fade" mode="out-in">
-            <div v-if="filteredCategories">
-                <div
-                    class="flex flex-col gap-6"
-                    v-for="mainCategory in filteredCategories"
-                >
-                    <div class="w-full flex items-center justify-between">
-                        <span>
-                            {{ mainCategory.name }}
-                        </span>
-                    </div>
+            <div
+                class="flex flex-col gap-20"
+                v-if="filteredCategories.some(cat => cat.subcategorys.length > 0)"
+            >
+
+                <template v-for="mainCategory in filteredCategories">
                     <div
-                        v-auto-animate
-                        class="grid grid-cols-3 gap-4 w-full mt-12"
+                        class="flex flex-col gap-12"
+                        v-if="mainCategory.subcategorys.length > 0"
                     >
-                        <CategoryCard
-                            v-for="category in mainCategory.subcategorys"
-                            :key="category.id"
-                            :id="category.id"
-                            :category="category.name"
-                            :picture="category.icon"
-                            :count="20"
-                            description="یک دسته بندی تستasdasd"
-                            dark-layer
-                        />
+                        <div class="w-full flex items-center justify-between gap-8">
+                            <div class="flex items-center gap-2">
+<!--                                <img :src="mainCategory.icon" alt="" class="w-[30px] opacity-50" />-->
+                                <span class="typo-h-5">
+                                    {{ mainCategory.name }}
+                                </span>
+                            </div>
+                            <div class="h-px w-full bg-slate-200" />
+                        </div>
+                        <div
+                            v-auto-animate
+                            class="grid grid-cols-3 gap-4 w-full"
+                        >
+                            <CategoryCard
+                                v-for="category in mainCategory.subcategorys"
+                                :key="category.id"
+                                :id="category.id"
+                                :category="category.name"
+                                :picture="category.image"
+                                :count="20"
+                                description="یک دسته بندی تستasdasd"
+                                dark-layer
+                            />
+                        </div>
                     </div>
-                </div>
+                </template>
+
             </div>
 
             <div v-else class="flex w-full mt-12">