// 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;

​

​

​

​