chore(LOY-10): rename folder to CurrentRewards

2024-12-05 08:53:22 +01:00
parent 13551417ed
commit d897bd81ac
6 changed files with 2 additions and 2 deletions
--- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
+++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { useRef,useState } from "react"
+
+import Pagination from "@/components/MyPages/Pagination"
+import { RewardIcon } from "@/components/Blocks/DynamicContent/Rewards/RewardIcon"
+import Grids from "@/components/TempDesignSystem/Grids"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import Redeem from "./Redeem"
+
+import styles from "./current.module.css"
+
+import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default function ClientCurrentRewards({
+  rewards,
+  pageSize,
+  showRedeem,
+}: CurrentRewardsClientProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [currentPage, setCurrentPage] = useState(1)
+
+  const totalPages = Math.ceil(rewards.length / pageSize)
+  const startIndex = (currentPage - 1) * pageSize
+  const endIndex = startIndex + pageSize
+  const currentRewards = rewards.slice(startIndex, endIndex)
+
+  function handlePageChange(page: number) {
+    requestAnimationFrame(() => {
+      setCurrentPage(page)
+      containerRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest",
+      })
+    })
+  }
+
+  return (
+    <div ref={containerRef} className={styles.container}>
+      <Grids.Stackable>
+        {currentRewards.map((reward, idx) => (
+          <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
+            <div className={styles.content}>
+              <div className={styles.icon}>
+                <RewardIcon rewardId={reward.reward_id} />
+              </div>
+              <Title
+                as="h4"
+                level="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {reward.label}
+              </Title>
+            </div>
+            {showRedeem && (
+              <div className={styles.btnContainer}>
+                <Redeem reward={reward} />
+              </div>
+            )}
+          </article>
+        ))}
+      </Grids.Stackable>
+      {totalPages > 1 && (
+        <Pagination
+          pageCount={totalPages}
+          currentPage={currentPage}
+          handlePageChange={handlePageChange}
+        />
+      )}
+    </div>
+  )
+}