import React, { useState, useEffect } from 'react';
const PrimaryTogglePagination = () => {
const totalPages = 20;
const [currentPage, setCurrentPage] = useState(1);
const [startIndex, setStartIndex] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(window.innerWidth <= 768 ? 3 : 5);
useEffect(() => {
const handleResize = () => {
if (window.innerWidth <= 768) {
setItemsPerPage(3);
} else {
setItemsPerPage(5);
}
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
const renderPagination = () => {
const pageButtons = [];
for (let i = startIndex; i < startIndex + itemsPerPage && i <= totalPages; i++) {
const isActive = i === currentPage;
const buttonClass = isActive
? 'px-4 py-2 text-sm font-medium border rounded-lg transition duration-200 transform bg-primarylw text-white border-primarylw scale-110 shadow-lg'
: 'px-4 py-2 text-sm font-medium border rounded-lg transition duration-200 transform bg-white text-gray-700 border-gray-300 hover:bg-primarylw-2 hover:text-white';
pageButtons.push(
);
}
return pageButtons;
};
const updatePagination = () => {
if (currentPage < startIndex) {
setStartIndex(currentPage);
} else if (currentPage >= startIndex + itemsPerPage) {
setStartIndex(currentPage - itemsPerPage + 1);
}
};
const prevButtonDisabled = currentPage === 1;
const nextButtonDisabled = currentPage === totalPages;
const handlePrevClick = () => {
if (currentPage > 1) {
setCurrentPage(currentPage - 1);
updatePagination();
}
};
const handleNextClick = () => {
if (currentPage < totalPages) {
setCurrentPage(currentPage + 1);
updatePagination();
}
};
useEffect(() => {
updatePagination();
}, [currentPage, itemsPerPage]);
return (
);
};
export default PrimaryTogglePagination;