refactor: Change pagination behavior on Media Page

GodxD69 · Jul 4, 2024 · e61fcd8 · e61fcd8
1 parent d180dbe
commit e61fcd8
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/app/media/[id]/components/PaginationButtons/index.tsx b/app/media/[id]/components/PaginationButtons/index.tsx
@@ -13,19 +13,26 @@ type NavTypes = {
 }
 
 export default function PaginationButtons({ onPageChange, pageCount, redirectToPage }: NavTypes) {
+
+    const pageRange = (typeof window !== "undefined") && window.matchMedia("(max-width: 440px)").matches ? 1 : 4
+
     return (
         <ReactPaginate
-            nextLabel={<ChevronRightSvg alt="Icon to Right side" width={16} height={16} />}
+            nextLabel={
+                <ChevronRightSvg alt="Icon to Right side" width={16} height={16} />
+            }
+            previousLabel={
+                <ChevronLeftSvg alt="Icon to left side" width={16} height={16} />
+            }
             onPageChange={onPageChange}
-            pageRangeDisplayed={(typeof window !== "undefined") && window.matchMedia("(max-width: 440px)").matches ? 1 : 2}
+            pageRangeDisplayed={pageRange}
             marginPagesDisplayed={1}
             pageCount={pageCount}
             forcePage={redirectToPage || 0}
-            previousLabel={<ChevronLeftSvg alt="Icon to left side" width={16} height={16} />}
             pageClassName={styles.li_item}
             pageLinkClassName="page-link"
-            previousClassName={styles.previous_btn}
             previousLinkClassName="page-link"
+            previousClassName={styles.previous_btn}
             nextClassName={styles.next_btn}
             nextLinkClassName="page-item"
             breakLabel="..."