import React, { useState } from "react";
interface PaginationProps {
totalPages: number;
initialPage?: number;
onPageChange?: (page: number) => void;
}
export default function PaginationWithIcon({
totalPages,
initialPage = 1,
onPageChange,
}: PaginationProps) {
const [currentPage, setCurrentPage] = useState(initialPage);
const handlePageChange = (page: number) => {
if (page < 1 || page > totalPages) return;
setCurrentPage(page);
onPageChange?.(page);
};
const renderPageNumbers = () => {
const pageNumbers = [];
const maxVisiblePages = 7;
if (totalPages <= maxVisiblePages) {
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(renderPageButton(i));
}
} else {
pageNumbers.push(renderPageButton(1));
if (currentPage > 3) pageNumbers.push(renderEllipsis());
let start = Math.max(2, currentPage - 1);
let end = Math.min(totalPages - 1, currentPage + 1);
if (currentPage <= 3) end = 5;
if (currentPage >= totalPages - 2) start = totalPages - 4;
for (let i = start; i <= end; i++) {
pageNumbers.push(renderPageButton(i));
}
if (currentPage < totalPages - 2) pageNumbers.push(renderEllipsisTwo());
pageNumbers.push(renderPageButton(totalPages));
}
return pageNumbers;
};
const renderPageButton = (page: number) => (
{
e.preventDefault();
handlePageChange(page);
}}
className={`flex items-center justify-center w-10 h-10 text-sm font-medium rounded-lg ${
currentPage === page
? "text-white bg-brand-500 hover:bg-brand-600"
: "text-gray-700 hover:bg-brand-500 hover:text-white dark:text-gray-400 dark:hover:text-white"
}`}
>
{page}
);
const renderEllipsis = () => (
...
);
const renderEllipsisTwo = () => (
...
);
return (
Page {currentPage} of {totalPages}
);
}