src/components/pagination/index.tsx

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>
    );
}