diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx index 5e6e878..591ad3c 100644 --- a/src/components/Pagination.tsx +++ b/src/components/Pagination.tsx @@ -38,3 +38,101 @@ export const Pagination = React.memo( ) } ) + +type PaginationWithPageNumbersProps = { + currentPage: number + totalPages: number + handlePageChange: (page: number) => void +} + +export const PaginationWithPageNumbers = ({ + currentPage, + totalPages, + handlePageChange +}: PaginationWithPageNumbersProps) => { + // Function to render the pagination controls with page numbers + const renderPagination = () => { + const pagesToShow = 5 // Number of page numbers to show around the current page + const pageNumbers: (number | string)[] = [] // Array to store page numbers and ellipses + + // Case when the total number of pages is less than or equal to the limit + if (totalPages <= pagesToShow + 2) { + for (let i = 1; i <= totalPages; i++) { + pageNumbers.push(i) // Add all pages to the pagination + } + } else { + // Add the first page (always visible) + pageNumbers.push(1) + + // Calculate the range of pages to show around the current page + const startPage = Math.max(2, currentPage - Math.floor(pagesToShow / 2)) + const endPage = Math.min( + totalPages - 1, + currentPage + Math.floor(pagesToShow / 2) + ) + + // Add ellipsis if there are pages between the first page and the startPage + if (startPage > 2) pageNumbers.push('...') + + // Add the pages around the current page + for (let i = startPage; i <= endPage; i++) { + pageNumbers.push(i) + } + + // Add ellipsis if there are pages between the endPage and the last page + if (endPage < totalPages - 1) pageNumbers.push('...') + + // Add the last page (always visible) + pageNumbers.push(totalPages) + } + + // Map over the array and render each page number or ellipsis + return pageNumbers.map((page, index) => { + if (typeof page === 'number') { + // For actual page numbers, render clickable boxes + return ( +
{page}
++ ... +
+ ) + } + }) + } + + return ( +