Pagination

let page = 4;

function goTo(next: number) {
	page = Math.min(TOTAL, Math.max(1, next));
	void handle.update();
}

<Pagination aria-label="Search results pages">
	<Pagination.List>
		<Pagination.Item>
			<Pagination.Button
				aria-label="Previous page"
				disabled={page === 1}
				mix={[on<HTMLButtonElement, "click">("click", () => goTo(page - 1))]}
			>
				<ChevronLeftIcon />
			</Pagination.Button>
		</Pagination.Item>

		{pageWindow(page, TOTAL).map((item) =>
			item.kind === "gap" ? (
				<Pagination.Item key={"gap-" + item.after}>
					<Pagination.Link aria-disabled="true">…</Pagination.Link>
				</Pagination.Item>
			) : (
				<Pagination.Item key={item.page}>
					<Pagination.Link
						href={"?page=" + item.page}
						aria-current={item.page === page ? "page" : undefined}
						mix={[
						on<HTMLAnchorElement, "click">("click", (event) => {
							event.preventDefault();
							goTo(item.page);
						}),
					]}
					>
						{item.page}
					</Pagination.Link>
				</Pagination.Item>
			),
		)}

		<Pagination.Item>
			<Pagination.Button
				aria-label="Next page"
				disabled={page === TOTAL}
				mix={[on<HTMLButtonElement, "click">("click", () => goTo(page + 1))]}
			>
				<ChevronRightIcon />
			</Pagination.Button>
		</Pagination.Item>
	</Pagination.List>
</Pagination>