97 lines
2.9 KiB
JavaScript
97 lines
2.9 KiB
JavaScript
// assets/js/components/Pagination.js
|
|
const Pagination = ({
|
|
currentPage,
|
|
totalPages,
|
|
totalRecords,
|
|
onPageChange,
|
|
itemsPerPage = 10,
|
|
}) => {
|
|
const getPageNumbers = () => {
|
|
const pages = [];
|
|
const maxVisible = 5;
|
|
|
|
if (totalPages <= maxVisible) {
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
pages.push(i);
|
|
}
|
|
} else {
|
|
if (currentPage <= 3) {
|
|
pages.push(1, 2, 3, 4, "...", totalPages);
|
|
} else if (currentPage >= totalPages - 2) {
|
|
pages.push(
|
|
1,
|
|
"...",
|
|
totalPages - 3,
|
|
totalPages - 2,
|
|
totalPages - 1,
|
|
totalPages
|
|
);
|
|
} else {
|
|
pages.push(
|
|
1,
|
|
"...",
|
|
currentPage - 1,
|
|
currentPage,
|
|
currentPage + 1,
|
|
"...",
|
|
totalPages
|
|
);
|
|
}
|
|
}
|
|
|
|
return pages;
|
|
};
|
|
|
|
const startRecord = Math.min(
|
|
(currentPage - 1) * itemsPerPage + 1,
|
|
totalRecords
|
|
);
|
|
const endRecord = Math.min(currentPage * itemsPerPage, totalRecords);
|
|
|
|
return (
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6 px-6 py-4 bg-slate-900/50 rounded-xl border border-slate-700">
|
|
<div className="text-slate-400 text-sm">
|
|
Menampilkan {startRecord} - {endRecord} dari {totalRecords} data
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => onPageChange(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
className="px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition disabled:bg-slate-900 disabled:text-slate-600 disabled:cursor-not-allowed border border-slate-700"
|
|
>
|
|
← Prev
|
|
</button>
|
|
|
|
{getPageNumbers().map((page, index) =>
|
|
page === "..." ? (
|
|
<span key={`dots-${index}`} className="px-3 py-2 text-slate-400">
|
|
...
|
|
</span>
|
|
) : (
|
|
<button
|
|
key={page}
|
|
onClick={() => onPageChange(page)}
|
|
className={`px-4 py-2 rounded-lg transition border ${
|
|
currentPage === page
|
|
? "bg-blue-600 text-white border-blue-500 font-semibold shadow-lg shadow-blue-500/50"
|
|
: "bg-slate-800 text-white hover:bg-slate-700 border-slate-700"
|
|
}`}
|
|
>
|
|
{page}
|
|
</button>
|
|
)
|
|
)}
|
|
|
|
<button
|
|
onClick={() => onPageChange(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
className="px-4 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition disabled:bg-slate-900 disabled:text-slate-600 disabled:cursor-not-allowed border border-slate-700"
|
|
>
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|