66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { buildPageItems } from "@/components/catalog/utils";
|
|
import styles from "@/components/BusinessDetailsPage.module.css";
|
|
|
|
export default function CatalogPagination({
|
|
page,
|
|
total,
|
|
pageSize,
|
|
onChange,
|
|
busy,
|
|
}: {
|
|
page: number;
|
|
total: number;
|
|
pageSize: number;
|
|
onChange: (page: number) => void;
|
|
busy?: boolean;
|
|
}) {
|
|
const pageCount = Math.max(1, Math.ceil(total / pageSize));
|
|
if (total <= pageSize) return null;
|
|
const items = buildPageItems(page, pageCount);
|
|
|
|
return (
|
|
<div className={styles.pagination}>
|
|
<button
|
|
type="button"
|
|
className={styles.pageBtn}
|
|
disabled={busy || page <= 1}
|
|
onClick={() => onChange(page - 1)}
|
|
aria-label="Previous page"
|
|
>
|
|
Prev
|
|
</button>
|
|
<div className={styles.pageNumbers}>
|
|
{items.map((item, index) =>
|
|
item === "…" ? (
|
|
<span key={`ellipsis-${index}`} className={styles.pageEllipsis}>
|
|
…
|
|
</span>
|
|
) : (
|
|
<button
|
|
key={item}
|
|
type="button"
|
|
className={item === page ? styles.pageNumActive : styles.pageNum}
|
|
disabled={busy || item === page}
|
|
onClick={() => onChange(item)}
|
|
aria-current={item === page ? "page" : undefined}
|
|
>
|
|
{item}
|
|
</button>
|
|
),
|
|
)}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className={styles.pageBtn}
|
|
disabled={busy || page >= pageCount}
|
|
onClick={() => onChange(page + 1)}
|
|
aria-label="Next page"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|