nysoure/frontend/src/components/pagination.tsx

import { ReactNode } from "react";
import { MdChevronLeft, MdChevronRight } from "react-icons/md";

export default function Pagination({
  page,
  setPage,
  totalPages,
}: {
  page: number;
  setPage: (page: number) => void;
  totalPages: number;
}) {
  const items: ReactNode[] = [];

  if (page > 1) {
    items.push(
      <button
        key={"btn-1"}
        className="join-item btn"
        onClick={() => setPage(1)}
      >
        1
      </button>,
    );
  }
  if (page - 2 > 1) {
    items.push(
      <button key={"btn-2"} className="join-item btn">
        ...
      </button>,
    );
  }
  if (page - 1 > 1) {
    items.push(
      <button
        key={"btn-3"}
        className="join-item btn"
        onClick={() => setPage(page - 1)}
      >
        {page - 1}
      </button>,
    );
  }
  items.push(
    <button key={"btn-4"} className="join-item btn btn-active">
      {page}
    </button>,
  );
  if (page + 1 < totalPages) {
    items.push(
      <button
        key={"btn-5"}
        className="join-item btn"
        onClick={() => setPage(page + 1)}
      >
        {page + 1}
      </button>,
    );
  }
  if (page + 2 < totalPages) {
    items.push(
      <button key={"btn-6"} className="join-item btn">
        ...
      </button>,
    );
  }
  if (page < totalPages) {
    items.push(
      <button
        key={"btn-7"}
        className="join-item btn"
        onClick={() => setPage(totalPages)}
      >
        {totalPages}
      </button>,
    );
  }

  return (
    <div className="join shadow rounded-field">
      <button
        key={"btn-prev"}
        className={`join-item btn`}
        onClick={() => {
          if (page > 1) {
            setPage(page - 1);
          }
        }}
      >
        <MdChevronLeft size={20} className="opacity-50" />
      </button>
      {items}
      <button
        key={"btn-next"}
        className={`join-item btn`}
        onClick={() => {
          if (page < totalPages) {
            setPage(page + 1);
          }
        }}
      >
        <MdChevronRight size={20} className="opacity-50" />
      </button>
    </div>
  );
}