From 4fa5b9620b19826f91c44c7eca5ac971811dad72 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sat, 25 Jan 2025 02:12:07 +0330
Subject: [PATCH] added category page

---
 frontend/pages/category.vue | 88 +++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 frontend/pages/category.vue

diff --git a/frontend/pages/category.vue b/frontend/pages/category.vue
new file mode 100644
index 0000000..c687e9c
--- /dev/null
+++ b/frontend/pages/category.vue
@@ -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>