added category page

2025-01-25 02:12:07 +03:30
parent 8982acb801
commit 4fa5b9620b
1 changed files with 88 additions and 0 deletions
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import useGetCategories from "~/composables/api/product/useGetCategories";
+
+// state
+
+const { data: categories, suspense } = useGetCategories();
+
+const search = ref("");
+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!;
+});
+
+// lifecycle
+
+onServerPrefetch(async () => {
+    const response = await suspense();
+
+    if (response.isError) {
+        throw createError({
+            statusCode: 500,
+            statusMessage: `Error in categories page prefetch`,
+        });
+    }
+});
+</script>
+
+<template>
+    <div class="container">
+        <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"
+                variant="outlined"
+                placeholder="جستجو..."
+                v-model="search"
+            >
+                <template #endItem>
+                    <div class="flex items-center gap-1">
+                        <Icon
+                            class="translate-y-[-1px]"
+                            name="ci:search"
+                            size="24"
+                        />
+                    </div>
+                </template>
+            </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="/img/product-1.jpg"
+                    :count="20"
+                    description="یک دسته بندی تستasdasd"
+                    dark-layer
+                />
+            </div>
+
+            <div v-else class="flex w-full mt-12">
+                <div
+                    class="flex-col flex-grow py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
+                >
+                    <Icon name="bi:search" size="50" class="**:fill-gray-500" />
+                    <span class="text-lg text-gray-500">
+                        دسته بندی یافت نشد :(
+                    </span>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>