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

components/MyPages/Pagination/index.tsx

@@ -0,0 +1,72 @@
+import { ChevronRightIcon } from "@/components/Icons"
+
+import styles from "./pagination.module.css"
+
+import {
+  PaginationButtonProps,
+  PaginationProps,
+} from "@/types/components/myPages/pagination"
+
+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/MyPages/Pagination/pagination.module.css

@@ -0,0 +1,40 @@
+.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(--Base-Text-Inverted);
+  background-color: var(--Base-Text-Accent);
+  border-radius: var(--Corner-radius-Rounded);
+}