41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
"use client";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
|
|
export default function Pagination1({ currentPage, totalPages, basePath }) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
const goToPage = (page) => {
|
|
if (page < 1 || page > totalPages) return;
|
|
const params = new URLSearchParams(searchParams.toString());
|
|
params.set("page", page);
|
|
router.push(`${basePath}?${params.toString()}`);
|
|
};
|
|
|
|
if (totalPages <= 1) return null;
|
|
|
|
return (
|
|
<div style={{ textAlign: 'center' }}>
|
|
<ul className="pagination" style={{ display: 'inline-flex' }}>
|
|
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
|
|
<a className="page-link" onClick={() => goToPage(currentPage - 1)}>
|
|
Prev
|
|
</a>
|
|
</li>
|
|
{[...Array(totalPages)].map((_, idx) => {
|
|
const page = idx + 1;
|
|
return (
|
|
<li key={page} className={`page-item ${currentPage === page ? "active" : ""}`}>
|
|
<a className="page-link" onClick={() => goToPage(page)}>{page}</a>
|
|
</li>
|
|
);
|
|
})}
|
|
<li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
|
|
<a className="page-link" onClick={() => goToPage(currentPage + 1)}>
|
|
Next
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|