47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import styles from './Paginator.module.scss';
|
|
import { Pagination } from '../../../lib/types/pagination.interface';
|
|
import conditionalClass from '../../../lib/utils/conditional-class';
|
|
|
|
export const Paginator = ({
|
|
pagination,
|
|
setPage,
|
|
}: {
|
|
pagination: Pagination;
|
|
setPage: (page: number) => void;
|
|
}) => {
|
|
// TODO: smarter page numbers
|
|
return (
|
|
<div className={styles.paginator}>
|
|
<button
|
|
className={[styles.pageButton, styles.previous].join(' ')}
|
|
onClick={() => setPage(pagination.page - 1)}
|
|
disabled={pagination.page <= 1}
|
|
>
|
|
Prev
|
|
</button>
|
|
{Array.from({ length: pagination.pageCount }, (_, i) => i + 1).map(
|
|
(pageNum) => (
|
|
<button
|
|
key={pageNum}
|
|
onClick={() => setPage(pageNum)}
|
|
disabled={pageNum === pagination.page}
|
|
className={[
|
|
styles.pageButton,
|
|
conditionalClass(pageNum === pagination.page, styles.current),
|
|
].join(' ')}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
)
|
|
)}
|
|
<button
|
|
className={[styles.pageButton, styles.next].join(' ')}
|
|
onClick={() => setPage(pagination.page + 1)}
|
|
disabled={pagination.page + 1 > pagination.pageCount}
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|