73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { ChevronRightIcon } from "@/components/Icons"
|
|
|
|
import styles from "./pagination.module.css"
|
|
|
|
import type {
|
|
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>
|
|
)
|
|
}
|