65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
|
|
import Image from "@/components/Image"
|
|
import Pagination from "@/components/MyPages/Pagination"
|
|
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 [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)
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Grids.Stackable>
|
|
{currentRewards.map((reward, idx) => (
|
|
<article className={styles.card} key={`${reward.reward_id}-${idx}`}>
|
|
<div className={styles.content}>
|
|
<Image
|
|
src="/_static/img/loyalty-award.png"
|
|
width={113}
|
|
height={125}
|
|
alt={reward.label || ""}
|
|
/>
|
|
<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>
|
|
<Pagination
|
|
pageCount={totalPages}
|
|
currentPage={currentPage}
|
|
handlePageChange={setCurrentPage}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|