Updated

frontend/pages/category.vue

@@ -15,17 +15,18 @@ const debouncedSearch = refDebounced(search, 300);
 
 const filteredCategories = computed(() => {
     if (debouncedSearch.value.length > 0) {
-        return categories.value!.filter((cat) =>
+        return categories.value?.filter((cat) =>
             cat.name.includes(debouncedSearch.value)
         );
     }
 
-    return categories.value!;
+    return categories.value;
 });
 
-// lifecycle
+// ssr
+
+await useAsyncData(async () => {
 
-onServerPrefetch(async () => {
     const response = await suspense();
 
     if (response.isError) {
@@ -34,7 +35,8 @@ onServerPrefetch(async () => {
             statusMessage: `Error in categories page prefetch`,
         });
     }
-});
+})
+
 </script>
 
 <template>
@@ -42,7 +44,7 @@ onServerPrefetch(async () => {
         <div class="py-[5rem] flex gap-6 justify-between items-center">
             <span class="typo-h-3 text-black">دسته بندی ها</span>
             <Input
-                class="max-w-[400px] w-full"
+                class="max-w-[400px] w-full rounded-full"
                 variant="outlined"
                 placeholder="جستجو..."
                 v-model="search"
@@ -60,7 +62,7 @@ onServerPrefetch(async () => {
         </div>
         <Transition name="fade" mode="out-in">
             <div
-                v-if="filteredCategories.length !== 0"
+                v-if="filteredCategories?.length !== 0"
                 v-auto-animate
                 class="grid grid-cols-3 gap-4 w-full mt-12"
             >
@@ -69,7 +71,7 @@ onServerPrefetch(async () => {
                     :key="category.id"
                     :id="category.id"
                     :category="category.name"
-                    picture="/img/product-1.jpg"
+                    :picture="category.icon"
                     :count="20"
                     description="یک دسته بندی تستasdasd"
                     dark-layer