From 26703bfb7488104a3eeae0634881093b5675677a Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 20 Oct 2023 21:16:07 +0100
Subject: [PATCH] make pagination better

---
 src/components/Pagination.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index c0e95a5..0aca029 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -36,6 +36,21 @@ export default function Pagination(props: PaginationProps) {
               </button>
             </li>
           )}
+
+          {currentPage !== 1 && currentPage - 2 > 1 && (
+            <>
+              <li>
+                <button
+                  className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                  onClick={() => onPageChange(1)}
+                >
+                  1
+                </button>
+              </li>
+              <p>...</p>
+            </>
+          )}
+
           {pageNumbers.map((pageNumber) => (
             <li key={pageNumber}>
               <button
@@ -50,6 +65,22 @@ export default function Pagination(props: PaginationProps) {
               </button>
             </li>
           ))}
+
+          {currentPage !== totalPages && currentPage + 2 < totalPages && (
+            <>
+              <p>...</p>
+
+              <li>
+                <button
+                  className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                  onClick={() => onPageChange(totalPages)}
+                >
+                  {totalPages}
+                </button>
+              </li>
+            </>
+          )}
+
           {currentPage < totalPages && (
             <li className="rounded-md bg-neutral-700 hover:opacity-80">
               <button