feat(LOY-53): CurrentRewards - replace show more functionality with pagination

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

@@ -6,9 +6,9 @@ import { useState } from "react"
 import { trpc } from "@/lib/trpc/client"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
+import Pagination from "@/components/MyPages/Pagination"
 
 import ClientTable from "./ClientTable"
-import Pagination from "./Pagination"
 
 import { Transactions } from "@/types/components/myPages/myPage/earnAndBurn"
 

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

@@ -1,72 +0,0 @@
-import { ChevronRightIcon } from "@/components/Icons"
-
-import styles from "./pagination.module.css"
-
-import {
-  PaginationButtonProps,
-  PaginationProps,
-} from "@/types/components/myPages/myPage/earnAndBurn"
-
-function PaginationButton({
-  children,
-  isActive,
-  handleClick,
-  disabled,
-}: React.PropsWithChildren<PaginationButtonProps>) {
-  return (
-    <button
-      type={"button"}
-      disabled={disabled}
-      onClick={handleClick}
-      className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
-    >
-      {children}
-    </button>
-  )
-}
-
-export default function Pagination({
-  pageCount,
-  isFetching,
-  handlePageChange,
-  currentPage,
-}: PaginationProps) {
-  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}
-          height={20}
-          width={20}
-        />
-      </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 height={20} width={20} />
-      </PaginationButton>
-    </div>
-  )
-}

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

@@ -1,40 +0,0 @@
-.pagination {
-  display: flex;
-  justify-content: left;
-  padding: var(--Spacing-x2);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-Rounded);
-  margin: auto;
-  gap: var(--Spacing-x5);
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-.paginationButton {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  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;
-  flex-shrink: 0;
-}
-
-.paginationButton[disabled] {
-  cursor: not-allowed;
-}
-.chevronLeft {
-  transform: rotate(180deg);
-  height: 100%;
-}
-
-.paginationButtonActive {
-  color: var(--WHITE);
-  background-color: var(--Base-Text-Accent);
-  border-radius: var(--Corner-radius-Rounded);
-}