chore: break out pagination component

components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Client.tsx

@@ -5,85 +5,14 @@ import { useState } from "react"
 
 import { trpc } from "@/lib/trpc/client"
 
-import { ChevronRightIcon } from "@/components/Icons"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
 import DesktopTable from "./Desktop"
 import MobileTable from "./Mobile"
-
-import styles from "../earnAndBurn.module.css"
+import Pagination from "./Pagination"
 
 import { Transactions } from "@/types/components/myPages/myPage/earnAndBurn"
 
-function PaginationButton({
-  children,
-  isActive,
-  handleClick,
-  disabled,
-}: React.PropsWithChildren<{
-  disabled: boolean
-  isActive?: boolean
-  handleClick: () => void
-}>) {
-  return (
-    <button
-      type={"button"}
-      disabled={disabled}
-      onClick={handleClick}
-      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
-    >
-      {children}
-    </button>
-  )
-}
-
-function Pagination({
-  pageCount,
-  isFetching,
-  handlePageChange,
-  currentPage,
-}: {
-  pageCount: number
-  isFetching: boolean
-  handlePageChange: (page: number) => void
-  currentPage: number
-}) {
-  const isOnFirstPage = currentPage === 1
-  const isOnLastPage = currentPage === pageCount
-  return (
-    <div className={styles.pagination}>
-      <PaginationButton
-        disabled={isFetching || isOnFirstPage}
-        handleClick={() => {
-          handlePageChange(currentPage - 1)
-        }}
-      >
-        <ChevronRightIcon className={styles.chevronLeft} />
-      </PaginationButton>
-      {[...Array(pageCount)].map((_, idx) => (
-        <PaginationButton
-          isActive={currentPage === idx + 1}
-          disabled={isFetching || currentPage === idx + 1}
-          key={idx}
-          handleClick={() => {
-            handlePageChange(idx + 1)
-          }}
-        >
-          {idx + 1}
-        </PaginationButton>
-      ))}
-      <PaginationButton
-        disabled={isFetching || isOnLastPage}
-        handleClick={() => {
-          handlePageChange(currentPage + 1)
-        }}
-      >
-        <ChevronRightIcon />
-      </PaginationButton>
-    </div>
-  )
-}
-
 export default function TransactionTable({
   initialJourneyTransactions,
 }: {

components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Pagination/index.tsx

@@ -0,0 +1,72 @@
+import { ChevronRightIcon } from "@/components/Icons"
+
+import styles from "./pagination.module.css"
+
+function PaginationButton({
+  children,
+  isActive,
+  handleClick,
+  disabled,
+}: React.PropsWithChildren<{
+  disabled: boolean
+  isActive?: boolean
+  handleClick: () => void
+}>) {
+  return (
+    <button
+      type={"button"}
+      disabled={disabled}
+      onClick={handleClick}
+      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default function Pagination({
+  pageCount,
+  isFetching,
+  handlePageChange,
+  currentPage,
+}: {
+  pageCount: number
+  isFetching: boolean
+  handlePageChange: (page: number) => void
+  currentPage: number
+}) {
+  const isOnFirstPage = currentPage === 1
+  const isOnLastPage = currentPage === pageCount
+  return (
+    <div className={styles.pagination}>
+      <PaginationButton
+        disabled={isFetching || isOnFirstPage}
+        handleClick={() => {
+          handlePageChange(currentPage - 1)
+        }}
+      >
+        <ChevronRightIcon className={styles.chevronLeft} />
+      </PaginationButton>
+      {[...Array(pageCount)].map((_, idx) => (
+        <PaginationButton
+          isActive={currentPage === idx + 1}
+          disabled={isFetching || currentPage === idx + 1}
+          key={idx}
+          handleClick={() => {
+            handlePageChange(idx + 1)
+          }}
+        >
+          {idx + 1}
+        </PaginationButton>
+      ))}
+      <PaginationButton
+        disabled={isFetching || isOnLastPage}
+        handleClick={() => {
+          handlePageChange(currentPage + 1)
+        }}
+      >
+        <ChevronRightIcon />
+      </PaginationButton>
+    </div>
+  )
+}

components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Pagination/pagination.module.css

@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
 .pagination {
   display: flex;
   justify-content: center;