Function PaginationControls

src/client/components/PaginationControls.tsx:25–150

({
  page,
  totalPages,
  onPageChange,
  disabled = false,
  className,
  siblingCount = 1,
})

type PaginationItemType = number | 'ellipsis';

export const PaginationControls: React.FC<PaginationControlsProps> = ({
  page,
  totalPages,
  onPageChange,
  disabled = false,
  className,
  siblingCount = 1,
}) => {
  const items = useMemo<PaginationItemType[]>(() => {
    const normalizedTotalPages = Math.max(0, Math.floor(totalPages));
    const normalizedSiblingCount = Math.max(0, Math.floor(siblingCount));

    if (normalizedTotalPages <= 0) {
      return [];
    }

    const rawPages = Array.from(
      { length: normalizedTotalPages },
      (_, index) => index + 1
    ).filter(
      (pageNumber) =>
        pageNumber === 1 ||
        pageNumber === normalizedTotalPages ||
        Math.abs(pageNumber - page) <= normalizedSiblingCount
    );

    const parsed: PaginationItemType[] = [];

    rawPages.forEach((pageNumber, index) => {
      const previousPage = rawPages[index - 1];
      if (index > 0 && previousPage && pageNumber - previousPage > 1) {
        parsed.push('ellipsis');
      }

      parsed.push(pageNumber);
    });

    return parsed;
  }, [page, siblingCount, totalPages]);

  if (totalPages <= 1 || items.length === 0) {
    return null;
  }

  const isPrevDisabled = disabled || page <= 1;
  const isNextDisabled = disabled || page >= totalPages;

  const handleChange = (nextPage: number) => {
    if (nextPage === page || nextPage < 1 || nextPage > totalPages) {
      return;
    }

    onPageChange(nextPage);
  };

  return (
    <Pagination className={className}>
      <PaginationContent>