marco.pms.web/src/components/common/Pagination.jsx

import React from "react";

const getPaginationRange = (currentPage, totalPages, delta = 1) => {
  const range = [];
  const rangeWithDots = [];
  let l;

  for (let i = 1; i <= totalPages; i++) {
    if (
      i === 1 ||
      i === totalPages ||
      (i >= currentPage - delta && i <= currentPage + delta)
    ) {
      range.push(i);
    }
  }

  for (let i of range) {
    if (l) {
      if (i - l === 2) {
        rangeWithDots.push(l + 1);
      } else if (i - l !== 1) {
        rangeWithDots.push("...");
      }
    }
    rangeWithDots.push(i);
    l = i;
  }

  return rangeWithDots;
};

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  if (totalPages <= 1) return null;

  const paginationRange = getPaginationRange(currentPage, totalPages);

  return (
    <nav aria-label="Page navigation">
      <ul className="pagination pagination-sm justify-content-end py-1 mx-1">
        <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
          <button
            className="page-link btn-xs"
            onClick={() => onPageChange(currentPage - 1)}
          >
            &laquo;
          </button>
        </li>

        {paginationRange.map((page, index) => (
          <li
            key={index}
            className={`page-item ${
              page === currentPage ? "active" : ""
            } ${page === "..." ? "disabled" : ""}`}
          >
            {page === "..." ? (
              <span className="page-link">…</span>
            ) : (
              <button className="page-link" onClick={() => onPageChange(page)}>
                {page}
              </button>
            )}
          </li>
        ))}

        <li
          className={`page-item ${
            currentPage === totalPages ? "disabled" : ""
          }`}
        >
          <button
            className="page-link"
            onClick={() => onPageChange(currentPage + 1)}
          >
            &raquo;
          </button>
        </li>
      </ul>
    </nav>
  );
};

export default Pagination;