From 26a35a902ca5589d2c78d553b8e1539270a7cc6b Mon Sep 17 00:00:00 2001
From: Hachi-R <drive8hachi@gmail.com>
Date: Mon, 23 Dec 2024 18:15:48 -0300
Subject: [PATCH] feat: enhance pagination component with first and last page
 buttons

---
 .../src/pages/catalogue/pagination.tsx        | 71 +++++++++++++------
 1 file changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/renderer/src/pages/catalogue/pagination.tsx b/src/renderer/src/pages/catalogue/pagination.tsx
index c2e510b2..377cbad9 100644
--- a/src/renderer/src/pages/catalogue/pagination.tsx
+++ b/src/renderer/src/pages/catalogue/pagination.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@renderer/components/button/button";
 import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
+import { useFormat } from "@renderer/hooks/use-format";
 
 interface PaginationProps {
   page: number;
@@ -27,6 +28,8 @@ export function Pagination({
     startPage = Math.max(1, endPage - visiblePages + 1);
   }
 
+  const { formatNumber } = useFormat();
+
   return (
     <div
       style={{
@@ -45,16 +48,29 @@ export function Pagination({
       </Button>
 
       {page > 2 && (
-        <div
-          style={{
-            width: 40,
-            justifyContent: "center",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <span style={{ fontSize: 16 }}>...</span>
-        </div>
+        <>
+          {/* initial page */}
+          <Button
+            theme="outline"
+            onClick={() => onPageChange(1)}
+            style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
+            disabled={page === 1}
+          >
+            {1}
+          </Button>
+
+          {/* ellipsis */}
+          <div
+            style={{
+              width: 40,
+              justifyContent: "center",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <span style={{ fontSize: 16 }}>...</span>
+          </div>
+        </>
       )}
 
       {/* Page Buttons */}
@@ -68,21 +84,34 @@ export function Pagination({
           style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
           onClick={() => onPageChange(pageNumber)}
         >
-          {pageNumber}
+          {formatNumber(pageNumber)}
         </Button>
       ))}
 
       {page < totalPages - 1 && (
-        <div
-          style={{
-            width: 40,
-            justifyContent: "center",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <span style={{ fontSize: 16 }}>...</span>
-        </div>
+        <>
+          {/* ellipsis */}
+          <div
+            style={{
+              width: 40,
+              justifyContent: "center",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <span style={{ fontSize: 16 }}>...</span>
+          </div>
+
+          {/* last page */}
+          <Button
+            theme="outline"
+            onClick={() => onPageChange(totalPages)}
+            style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
+            disabled={page === totalPages}
+          >
+            {formatNumber(totalPages)}
+          </Button>
+        </>
       )}
 
       {/* Next Button */}