// Example SecondPagination component with limited visible page numbers and ellipsis import React from 'react'; const Pagination = ({ currentPage, totalPages, onPageChange }) => { const maxVisiblePages = 5; // Maximum number of visible page buttons const generatePageNumbers = () => { let pageNumbers = []; // Determine the range of visible pages let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2)); let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1); // Adjust startPage and endPage if necessary if (endPage - startPage + 1 < maxVisiblePages) { startPage = Math.max(1, endPage - maxVisiblePages + 1); } // Add visible page numbers for (let i = startPage; i <= endPage; i++) { pageNumbers.push(i); } // Add ellipsis if necessary if (startPage > 1) { pageNumbers = [1, '...', ...pageNumbers]; } if (endPage < totalPages) { pageNumbers = [...pageNumbers, '...', totalPages]; } return pageNumbers; }; return ( <nav className='flex items-center justify-center mt-4'> <ul className="pagination flex space-x-2"> <li> <button onClick={() => onPageChange(1)} disabled={currentPage === 1} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50"> First </button> </li> <li> <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50" > Previous </button> </li> {generatePageNumbers().map((pageNumber, index) => ( <li key={index}> { pageNumber != "..." ? ( <button onClick={() => {onPageChange(pageNumber)}} className={`${currentPage === pageNumber ? 'active border border-primary text-primary' : ''} p-1 px-2 border`} > {pageNumber} </button> ) : ( <button // onClick={() => {onPageChange(pageNumber)}} className={`${currentPage === pageNumber ? 'active border border-primary text-primary' : ''} p-1 px-2`} > {pageNumber} </button> ) } </li> ))} <li> <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50"> Next </button> </li> <li> <button onClick={() => onPageChange(totalPages)} disabled={currentPage === totalPages} className="border hover:bg-primary/50 text-white font-bold py-1 px-2 rounded focus:outline-none disabled:opacity-50"> Last </button> </li> </ul> </nav> ); }; export default Pagination; //Home.jsx import React, { useState, useEffect } from 'react'; import Pagination from './Pagination'; const Home = () => { const [games, setGames] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [gamesPerPage] = useState(3); useEffect(() => { const fetchGames = async () => { try { const response = await axios.get('http://localhost:3000/games'); setGames(response.data); } catch (error) { console.error('Error fetching games:', error); } }; fetchGames(); }, []); const indexOfLastGame = currentPage * gamesPerPage; const indexOfFirstGame = indexOfLastGame - gamesPerPage; const currentGames = games.slice(indexOfFirstGame, indexOfLastGame); const paginate = (pageNumber) => setCurrentPage(pageNumber); return ( <div> <h1>Games</h1> <ul> {currentGames.map((game) => ( <li key={game.id}>{game.name}</li> ))} </ul> <Pagination currentPage={currentPage} totalPages={Math.ceil(games.length / gamesPerPage)} onPageChange={paginate} /> </div> ); }; export default Home;