import React from 'react'; import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react'; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export interface PaginationProps { totalItems: number; itemsPerPage: number; currentPage: number; onPageChange: (page: number) => void; className?: string; showFirstLastButtons?: boolean; pageButtonLimit?: number; } const Pagination: React.FC = ({ totalItems, itemsPerPage, currentPage, onPageChange, className, showFirstLastButtons = true, pageButtonLimit = 5, // Must be an odd number to center around current page }) => { const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage)); // Ensure current page is within valid bounds const validatedCurrentPage = Math.max(1, Math.min(currentPage, totalPages)); const handlePageChange = (page: number) => { if (page >= 1 && page <= totalPages && page !== validatedCurrentPage) { onPageChange(page); } }; const renderPageNumbers = () => { const pages: (number | 'ellipsis')[] = []; const maxButtons = Math.max(1, pageButtonLimit); // Ensure at least 1 button const halfLimit = Math.floor(maxButtons / 2); let startPage = Math.max(1, validatedCurrentPage - halfLimit); let endPage = Math.min(totalPages, validatedCurrentPage + halfLimit); // Adjust start/end to ensure `maxButtons` are shown if possible if (endPage - startPage + 1 < maxButtons) { if (startPage === 1) { endPage = Math.min(totalPages, startPage + maxButtons - 1); } else if (endPage === totalPages) { startPage = Math.max(1, totalPages - maxButtons + 1); } } // Always show first page if not already in range and needed for ellipsis if (startPage > 1) { pages.push(1); if (startPage > 2) { pages.push('ellipsis'); } } for (let i = startPage; i <= endPage; i++) { pages.push(i); } // Always show last page if not already in range and needed for ellipsis if (endPage < totalPages) { if (endPage < totalPages - 1) { pages.push('ellipsis'); } pages.push(totalPages); } return pages.map((page, index) => page === 'ellipsis' ? ( ) : ( ) ); }; const isFirstPage = validatedCurrentPage === 1; const isLastPage = validatedCurrentPage === totalPages; return ( ); }; const ExampleUsage = () => { const [currentPage, setCurrentPage] = React.useState(1); const totalItems = 100; const itemsPerPage = 10; const handlePageChange = (page: number) => { setCurrentPage(page); // In a real application, you would fetch data for the new page here. console.log(`Navigating to page: ${page}`); }; // Simulate data for the current page const startIndex = (currentPage - 1) * itemsPerPage; const endIndex = Math.min(startIndex + itemsPerPage, totalItems); const currentItems = Array.from({ length: totalItems }).map((_, i) => `Item ${i + 1}`).slice(startIndex, endIndex); return (

Content for Current Page

Displaying items {startIndex + 1} to {endIndex} of {totalItems}.

{item}

); }; export default ExampleUsage;