File size: 1,493 Bytes
a417977 |
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 |
import style from "./style.module.scss";
import {
ChevronRight,
ChevronLeft,
} from "preact-feather";
import cn from "classnames";
const maxNumber = 10;
export function Pagination(props: {
pageCount: number;
page: number;
setPage: (page: number) => void;
}) {
return (
<div className={style.pagination}>
<div
className={cn(style.chevronWrapper, {[style.disabled]: props.page <= 0})}
onClick={() => props.setPage(Math.max(props.page - 1, 0))}
title="Précédent"
>
<ChevronLeft/>
</div>
<div className={style.numbers}>
{
Array.from({length: props.pageCount}, (_, i) => i)
.map(n => (
<span
className={cn(style.number, {[style.active]: n === props.page})}
onClick={() => props.setPage(n)}
>
{n + 1}
</span>
))
}
</div>
<div
className={cn(style.chevronWrapper, {[style.disabled]: props.page >= props.pageCount - 1})}
onClick={() => props.setPage(Math.min(props.page + 1, props.pageCount - 1))}
title="Suivant"
>
<ChevronRight/>
</div>
</div>
);
} |