reflector/www/app/[domain]/browse/pagination.tsx

import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type PaginationProps = {
  page: number;
  setPage: (page: number) => void;
  total: number;
  size: number;
};

export default function Pagination(props: PaginationProps) {
  const { page, setPage, total, size } = props;
  const totalPages = Math.ceil(total / size);

  const pageNumbers = Array.from(
    { length: totalPages },
    (_, i) => i + 1,
  ).filter((pageNumber) => {
    if (totalPages <= 3) {
      // If there are 3 or fewer total pages, show all pages.
      return true;
    } else if (page <= 2) {
      // For the first two pages, show the first 3 pages.
      return pageNumber <= 3;
    } else if (page >= totalPages - 1) {
      // For the last two pages, show the last 3 pages.
      return pageNumber >= totalPages - 2;
    } else {
      // For all other cases, show 3 pages centered around the current page.
      return pageNumber >= page - 1 && pageNumber <= page + 1;
    }
  });

  const canGoPrevious = page > 1;
  const canGoNext = page < totalPages;

  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setPage(newPage);
    }
  };

  return (
    <div className="flex justify-center space-x-4 my-4">
      <button
        className={`w-10 h-10 rounded-full p-2 ${
          canGoPrevious ? "text-gray-500" : "text-gray-300"
        }`}
        onClick={() => handlePageChange(page - 1)}
        disabled={!canGoPrevious}
      >
        <FontAwesomeIcon icon={faArrowLeft} className="h-5 w-auto" />
      </button>

      {pageNumbers.map((pageNumber) => (
        <button
          key={pageNumber}
          className={`w-10 h-10 rounded-full p-2 border ${
            page === pageNumber ? "border-gray-600" : "border-gray-300"
          } rounded`}
          onClick={() => handlePageChange(pageNumber)}
        >
          {pageNumber}
        </button>
      ))}

      <button
        className={`w-10 h-10 rounded-full p-2 ${
          canGoNext ? "text-gray-500" : "text-gray-300"
        }`}
        onClick={() => handlePageChange(page + 1)}
        disabled={!canGoNext}
      >
        <FontAwesomeIcon icon={faArrowRight} className="h-5 w-auto" />
      </button>
    </div>
  );
}