84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
|
|
const Pagination = ({ currentPage, totalPages, onPageChange }) => {
|
|
const handlePageClick = (e, page) => {
|
|
if (e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
if (page !== currentPage && page >= 1 && page <= totalPages) {
|
|
onPageChange(page);
|
|
// Scroll to top of blog section smoothly
|
|
const blogSection = document.querySelector('.blog-section');
|
|
if (blogSection) {
|
|
const offset = 100; // Offset from top
|
|
const elementPosition = blogSection.getBoundingClientRect().top;
|
|
const offsetPosition = elementPosition + window.pageYOffset - offset;
|
|
|
|
window.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const renderPageNumbers = () => {
|
|
const pages = [];
|
|
const maxVisiblePages = 5;
|
|
|
|
let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
|
|
let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
|
|
|
|
if (endPage - startPage < maxVisiblePages - 1) {
|
|
startPage = Math.max(1, endPage - maxVisiblePages + 1);
|
|
}
|
|
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
pages.push(
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
className={`pagination-number ${currentPage === i ? 'active' : ''}`}
|
|
onClick={(e) => handlePageClick(e, i)}
|
|
>
|
|
{i}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return pages;
|
|
};
|
|
|
|
return (
|
|
<div className="pagination-wrapper">
|
|
<div className="pagination-container">
|
|
{/* Previous Button */}
|
|
<button
|
|
type="button"
|
|
className="pagination-arrow pagination-arrow-prev"
|
|
onClick={(e) => handlePageClick(e, currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
>
|
|
«
|
|
</button>
|
|
|
|
{/* Page Numbers */}
|
|
{renderPageNumbers()}
|
|
|
|
{/* Next Button */}
|
|
<button
|
|
type="button"
|
|
className="pagination-arrow pagination-arrow-next"
|
|
onClick={(e) => handlePageClick(e, currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
»
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|