kontenhumas-fe/components/table/custom-pagination.tsx

"use client";
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";

import { useEffect, useState } from "react";

export default function CustomPagination(props: {
  totalPage: number;
  onPageChange: (data: number) => void;
}) {
  const { totalPage, onPageChange } = props;
  const [page, setPage] = useState(1);

  useEffect(() => {
    onPageChange(page);
  }, [page]);

  const renderPageNumbers = () => {
    const pageNumbers = [];
    const halfWindow = Math.floor(5 / 2);
    let startPage = Math.max(2, page - halfWindow);
    let endPage = Math.min(totalPage - 1, page + halfWindow);

    if (endPage - startPage + 1 < 5) {
      if (page <= halfWindow) {
        endPage = Math.min(
          totalPage,
          endPage + (5 - (endPage - startPage + 1))
        );
      } else if (page + halfWindow >= totalPage) {
        startPage = Math.max(1, startPage - (5 - (endPage - startPage + 1)));
      }
    }

    if (startPage === endPage) {
      return "";
    }

    for (let i = startPage; i <= endPage; i++) {
      pageNumbers.push(
        <PaginationItem key={i} onClick={() => setPage(i)}>
          <PaginationLink isActive={page === i}>{i}</PaginationLink>
        </PaginationItem>
      );
    }

    return pageNumbers;
  };
  return (
    <Pagination>
      <PaginationContent>
        {page - 10 >= 1 && (
          <PaginationItem>
            <PaginationLink
              onClick={() => (page > 10 ? setPage(page - 10) : setPage(1))}
            >
              {/* <DoubleArrowLeftIcon /> */}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z"
                />
              </svg>
            </PaginationLink>
          </PaginationItem>
        )}

        <PaginationItem className="hidden md:block">
          <PaginationPrevious
            onClick={() => (page > 1 ? setPage(page - 1) : "")}
          />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink onClick={() => setPage(1)} isActive={page === 1}>
            {1}
          </PaginationLink>
        </PaginationItem>
        {page > 4 && (
          <PaginationItem>
            <PaginationEllipsis onClick={() => setPage(page - 1)} />
          </PaginationItem>
        )}
        {renderPageNumbers()}
        {page < totalPage - 3 && (
          <PaginationItem>
            <PaginationEllipsis onClick={() => setPage(page + 1)} />
          </PaginationItem>
        )}
        {totalPage > 1 && (
          <PaginationItem>
            <PaginationLink
              onClick={() => setPage(totalPage)}
              isActive={page === totalPage}
            >
              {totalPage}
            </PaginationLink>
          </PaginationItem>
        )}

        <PaginationItem className="hidden md:block">
          <PaginationNext
            onClick={() => (page < totalPage ? setPage(page + 1) : "")}
          />
        </PaginationItem>

        {page + 10 <= totalPage && totalPage > 9 && (
          <PaginationItem>
            <PaginationLink
              onClick={() =>
                page < totalPage - 10 ? setPage(page + 10) : setPage(totalPage)
              }
            >
              {/* <DoubleArrowRightIcon /> */}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zm6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12z"
                />
              </svg>
            </PaginationLink>
          </PaginationItem>
        )}
      </PaginationContent>
    </Pagination>
  );
}