From 96d8663c35322fb10b444e942384ea8a32aeea29 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 14 Jan 2025 20:47:05 +0330
Subject: [PATCH] added pagination

---
 frontend/components/global/Pagination.vue | 68 ++++++++++++++++++++---
 1 file changed, 59 insertions(+), 9 deletions(-)

diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index 4b90cf4..a904a62 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -1,18 +1,68 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// types
+
+type Props = {
+    total: number;
+    items: {
+        type: "page" | "not-page";
+        value: number;
+    }[];
+};
+
+// props
+
+defineProps<Props>();
+</script>
 
 <template>
-    <PaginationRoot>
-        <PaginationList v-slot="{ items }">
-            <PaginationFirst />
-            <PaginationPrev />
+    <PaginationRoot
+        :total="100"
+        :sibling-count="1"
+        :items-per-page="10"
+        show-edges
+    >
+        <PaginationList
+            v-slot="{ items }"
+            class="flex items-center gap-1 text-stone-700 dark:text-white"
+        >
+            <PaginationFirst
+                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition disabled:opacity-50 rounded-lg"
+            >
+                <Icon name="ci:double-arrow-left" />
+            </PaginationFirst>
+            <PaginationPrev
+                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition mr-4 disabled:opacity-50 rounded-lg"
+            >
+                <Icon name="ci:chevron-left" />
+            </PaginationPrev>
             <template v-for="(page, index) in items">
-                <PaginationListItem v-if="page.type === 'page'" :key="index" />
-                <PaginationEllipsis v-else :key="page.type" :index="index">
+                <PaginationListItem
+                    v-if="page.type === 'page'"
+                    :key="index"
+                    class="w-9 h-9 border dark:border-stone-800 rounded-lg data-[selected]:!bg-white data-[selected]:shadow-sm data-[selected]:text-blackA11 hover:bg-white dark:hover:bg-stone-700/70 transition"
+                    :value="page.value"
+                >
+                    {{ page.value }}
+                </PaginationListItem>
+                <PaginationEllipsis
+                    v-else
+                    :key="page.type"
+                    :index="index"
+                    class="w-9 h-9 flex items-center justify-center"
+                >
                     &#8230;
                 </PaginationEllipsis>
             </template>
-            <PaginationNext />
-            <PaginationLast />
+            <PaginationNext
+                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition ml-4 disabled:opacity-50 rounded-lg"
+            >
+                <Icon name="ci:chevron-right" />
+            </PaginationNext>
+            <PaginationLast
+                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition disabled:opacity-50 rounded-lg"
+            >
+                <Icon name="ci:double-arrow-right" />
+            </PaginationLast>
         </PaginationList>
     </PaginationRoot>
 </template>