From 4245bfa35e921a90a7eff4d98b95408374d17783 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Mon, 12 May 2025 18:53:55 +0330
Subject: [PATCH] responsived pagination

---
 frontend/components/global/Pagination.vue | 33 ++++++++++++++++-------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index f5727ac..90665f1 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// imports
+
+import { useRatio } from "~/composables/global/useRatio";
+
 // types
 
 type Props = {
@@ -17,6 +21,8 @@ defineProps<Props>();
 
 const params: any = inject("params");
 
+const { isMobile } = useRatio();
+
 const { y } = useWindowScroll({ behavior: "smooth" });
 
 // computed
@@ -33,26 +39,29 @@ const page = computed({
 <template>
     <PaginationRoot
         :total="total"
-        :sibling-count="1"
+        :sibling-count="isMobile ? 0 : 1"
         :items-per-page="15"
-        show-edges
         v-model:page="page"
     >
-        <PaginationList v-slot="{ items }" class="flex items-center gap-2">
+        <PaginationList
+            v-slot="{ items }"
+            class="flex items-center gap-2"
+        >
             <PaginationFirst
                 class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 برو اول
             </PaginationFirst>
-            <PaginationNext
-                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+
+            <PaginationPrev
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
                 <Icon
                     name="ci:chevron-right"
                     class="**:fill-back"
                     size="18px"
                 />
-            </PaginationNext>
+            </PaginationPrev>
 
             <template v-for="(page, index) in items">
                 <PaginationListItem
@@ -73,11 +82,15 @@ const page = computed({
                 </PaginationEllipsis>
             </template>
 
-            <PaginationPrev
-                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
+            <PaginationNext
+                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="ci:chevron-left" class="**:fill-back" size="18px" />
-            </PaginationPrev>
+                <Icon
+                    name="ci:chevron-left"
+                    class="**:fill-back"
+                    size="18px"
+                />
+            </PaginationNext>
 
             <PaginationLast
                 class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"