Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1x 1x 1x 1x 1x 1x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 199x 199x 199x 199x 199x 199x 199x 199x 199x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 101x 1x | import { FC } from 'react';
import { FaAngleLeft, FaAngleRight, FaAngleDoubleLeft, FaAngleDoubleRight } from 'react-icons/fa';
import Button, { ButtonVariant } from '../button/Button';
import { getVisiblePages } from './getVisiblePages';
import './Paginator.scss';
interface PaginatorProps {
currentPage: number;
totalPages: number;
maxVisiblePages?: number;
onPageChange: (page: number) => void;
}
const { ROUND } = ButtonVariant;
const Paginator: FC<PaginatorProps> = ({ currentPage, totalPages, maxVisiblePages = 5, onPageChange }) => {
const visiblePages = getVisiblePages(currentPage, totalPages, maxVisiblePages);
return (
<div className="paginator">
<Button
className="paginator__nav"
variant={ROUND}
handleClick={() => onPageChange(1)}
disabled={currentPage === 1}
aria-label="First Page"
>
<FaAngleDoubleLeft />
</Button>
<Button
variant={ROUND}
className="paginator__nav"
handleClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
aria-label="Previous Page"
>
<FaAngleLeft />
</Button>
{visiblePages?.map((page) => (
<Button
key={`paginator-page-btn-${page}`}
variant={ROUND}
aria-label={`Page ${page}`}
className="paginator__page"
active={page === currentPage}
handleClick={() => onPageChange(page)}
>
{page}
</Button>
))}
<Button
className="paginator__nav"
variant={ROUND}
handleClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
aria-label="Next Page"
>
<FaAngleRight />
</Button>
<Button
className="paginator__nav"
variant={ROUND}
handleClick={() => onPageChange(totalPages)}
disabled={currentPage === totalPages}
aria-label="Last Page"
>
<FaAngleDoubleRight />
</Button>
</div>
);
};
export default Paginator;
|