From e2f951581f01e0d58d922e01a8b8b80a71dc3ade Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Mon, 21 Apr 2025 23:32:20 +0330
Subject: [PATCH] new changes

---
 frontend/pages/products.vue | 50 ++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index d0577a3..ff73d9b 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 // import
 
-import useGetProducts, {
-    type GetProductsFilters,
-} from "~/composables/api/products/useGetProducts";
+import useGetProducts, { type GetProductsFilters } from "~/composables/api/products/useGetProducts";
 import { PRODUCT_RANGE } from "~/constants";
 
 // state
@@ -59,12 +57,8 @@ watch(
 
 <template>
     <div class="w-full container flex flex-col">
-        <div
-            class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
-        >
-            <div
-                class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full"
-            >
+        <div class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5">
+            <div class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full">
                 <!-- <div class="flex-center gap-[.75rem]">
                     <span class="text-xs lg:text-sm">خانه</span>
                     <span class="text-xs lg:text-sm">/</span>
@@ -75,9 +69,7 @@ watch(
                 <h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
             </div>
 
-            <div
-                class="w-full flex items-center justify-between lg:justify-end gap-4"
-            >
+            <div class="w-full flex items-center justify-between lg:justify-end gap-4">
                 <Input
                     placeholder="جست و جو محصول ..."
                     v-model="search"
@@ -96,9 +88,7 @@ watch(
                 <Suspense>
                     <FilterButton />
                     <template #fallback>
-                        <Skeleton
-                            class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl"
-                        />
+                        <Skeleton class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-xl" />
                     </template>
                 </Suspense>
             </div>
@@ -107,24 +97,35 @@ watch(
             v-if="productsIsLoading"
             class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-8 gap-5 sm:gap-8 w-full"
         >
-            <div class="w-full flex flex-col gap-3" v-for="i in 8" :key="i">
+            <div
+                class="w-full flex flex-col gap-3"
+                v-for="i in 8"
+                :key="i"
+            >
                 <Skeleton
                     v-for="i in 3"
                     :key="i"
                     class="w-full"
                     :class="{
                         '!h-[11.75rem] lg:!h-[22.5rem] !rounded-2xl': i == 1,
-                        '!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [
-                            2, 3,
-                        ].includes(i),
+                        '!h-[1.35rem] lg:!h-[1.5rem] !rounded-sm lg:!hidden': [2, 3].includes(i),
                         '!w-1/2': i == 2,
                     }"
                 />
             </div>
         </ul>
-        <div v-else class="w-full h-max">
-            <div v-if="!products!.length" class="flex flex-grow w-full">
-                <Placeholder title="محصولی یافت نشد :(" icon="bi:search" />
+        <div
+            v-else
+            class="w-full h-max"
+        >
+            <div
+                v-if="!products!.length"
+                class="flex flex-grow w-full"
+            >
+                <Placeholder
+                    title="محصولی یافت نشد :("
+                    icon="bi:search"
+                />
             </div>
             <ProductsGrid
                 :with-header="false"
@@ -135,7 +136,10 @@ watch(
                 v-if="data && paginationData && data.count > 10"
                 class="w-full flex-center py-10"
             >
-                <Pagination :items="paginationData" :total="data.count" />
+                <Pagination
+                    :items="paginationData"
+                    :total="data.count"
+                />
             </div>
         </div>
     </div>