chore: break out pagination component

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

@@ -0,0 +1,33 @@
+.pagination {
+  display: flex;
+  justify-content: center;
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  margin: auto;
+  gap: var(--Spacing-x5);
+}
+
+.paginationButton {
+  background-color: transparent;
+  border: none;
+  height: 32px;
+  width: 32px;
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chevronLeft {
+  transform: rotate(180deg);
+  height: 100%;
+}
+
+.paginationButtonActive {
+  color: var(--WHITE);
+  background-color: var(--Base-Text-Accent);
+  border-radius: var(--Corner-radius-Rounded);
+}