73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { ChevronRightIcon } from "@/components/Icons"
|
|
|
|
import styles from "./pagination.module.css"
|
|
|
|
function PaginationButton({
|
|
children,
|
|
isActive,
|
|
handleClick,
|
|
disabled,
|
|
}: React.PropsWithChildren<{
|
|
disabled: boolean
|
|
isActive?: boolean
|
|
handleClick: () => void
|
|
}>) {
|
|
return (
|
|
<button
|
|
type={"button"}
|
|
disabled={disabled}
|
|
onClick={handleClick}
|
|
className={`${styles.paginationButton} ${isActive ? styles.paginationButtonActive : ""}`}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default function Pagination({
|
|
pageCount,
|
|
isFetching,
|
|
handlePageChange,
|
|
currentPage,
|
|
}: {
|
|
pageCount: number
|
|
isFetching: boolean
|
|
handlePageChange: (page: number) => void
|
|
currentPage: number
|
|
}) {
|
|
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} />
|
|
</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 />
|
|
</PaginationButton>
|
|
</div>
|
|
)
|
|
}
|