This repository has been archived on 2024-06-14. You can view files and clone it, but cannot push or open issues or pull requests.
icynet-admin/components/common/Paginator/Paginator.tsx

47 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-08-29 18:09:28 +00:00
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>
);
};