Updated

frontend/pages/category.vue

@@ -14,13 +14,18 @@ const debouncedSearch = refDebounced(search, 300);
 // computed
 
 const filteredCategories = computed(() => {
+
     if (debouncedSearch.value.length > 0) {
-        return categories.value?.filter((cat) =>
-            cat.name.includes(debouncedSearch.value)
-        );
+        return categories.value!.map((cat) => {
+            cat.subcategorys = cat.subcategorys.filter((subcat) => {
+                return subcat.name.includes(debouncedSearch.value);
+            });
+
+            return cat;
+        });
     }
 
-    return categories.value;
+    return categories.value!;
 });
 
 // ssr
@@ -32,10 +37,10 @@ await useAsyncData(async () => {
     if (response.isError) {
         throw createError({
             statusCode: 500,
-            statusMessage: `Error in categories page prefetch`,
+            statusMessage: `Error in categories page prefetch`
         });
     }
-})
+});
 
 </script>
 
@@ -61,21 +66,32 @@ await useAsyncData(async () => {
             </Input>
         </div>
         <Transition name="fade" mode="out-in">
-            <div
-                v-if="filteredCategories?.length !== 0"
-                v-auto-animate
-                class="grid grid-cols-3 gap-4 w-full mt-12"
-            >
-                <CategoryCard
-                    v-for="category in filteredCategories"
-                    :key="category.id"
-                    :id="category.id"
-                    :category="category.name"
-                    :picture="category.icon"
-                    :count="20"
-                    description="یک دسته بندی تستasdasd"
-                    dark-layer
-                />
+            <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
+                        v-auto-animate
+                        class="grid grid-cols-3 gap-4 w-full mt-12"
+                    >
+                        <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>
+                </div>
             </div>
 
             <div v-else class="flex w-full mt-12">