sendou.ink/app/components/Pagination.tsx

import clsx from "clsx";
import { Button } from "~/components/Button";
import { ArrowLeftIcon } from "~/components/icons/ArrowLeft";
import { ArrowRightIcon } from "~/components/icons/ArrowRight";
import { nullFilledArray } from "~/utils/arrays";

export function Pagination({
	currentPage,
	pagesCount,
	nextPage,
	previousPage,
	setPage,
}: {
	currentPage: number;
	pagesCount: number;
	nextPage: () => void;
	previousPage: () => void;
	setPage: (page: number) => void;
}) {
	return (
		<div className="stack sm horizontal items-center justify-center flex-wrap">
			<Button
				icon={<ArrowLeftIcon />}
				variant="outlined"
				className="fix-rtl"
				disabled={currentPage === 1}
				onClick={previousPage}
				aria-label="Previous page"
			/>
			{nullFilledArray(pagesCount).map((_, i) => (
				<div
					key={i}
					className={clsx("pagination__dot", {
						pagination__dot__active: i === currentPage - 1,
					})}
					onClick={() => setPage(i + 1)}
				/>
			))}
			<div className="pagination__page-count">
				{currentPage}/{pagesCount}
			</div>
			<Button
				icon={<ArrowRightIcon />}
				variant="outlined"
				className="fix-rtl"
				disabled={currentPage === pagesCount}
				onClick={nextPage}
				aria-label="Next page"
			/>
		</div>
	);
}