gistfile1.txt

import { Stack, Box, Button } from "@chakra-ui/react";
import { ButtonVariants } from "@/styles/components/button";
import { PaginationItem } from "./components/PaginationItem";
import { Arrow } from "./components/Arrow";

interface PaginationProps {
  totalCountOfRegisters: number;
  registerPerPage?: number;
  currentPage?: number;
  onPageChange: (page: number) => void;
}

const siblingsCount = 1;

function generatePagesArray(from: number, to: number) {
  return [...new Array(to - from)]
    .map((_, index) => from + index + 1)
    .filter((page) => page > 0);
}

export function Pagination({
  totalCountOfRegisters,
  registerPerPage = 10,
  currentPage = 1,
  onPageChange
}: PaginationProps) {
  const lastPage = Math.ceil(totalCountOfRegisters / registerPerPage);

  const previousPage =
    currentPage > 1
      ? generatePagesArray(currentPage - 1 - siblingsCount, currentPage - 1)
      : [];

  const nextPages =
    currentPage < lastPage
      ? generatePagesArray(currentPage, Math.min(currentPage + siblingsCount))
      : [];

  return (
    <Stack
      direction={["column", "row"]}
      align="center"
      mt="8"
      justify="space-between"
      spacing="6"
    >
      <Box>
        <strong>{currentPage}</strong> - <strong>{lastPage}</strong> de{" "}
        <strong>{totalCountOfRegisters}</strong>
      </Box>
      <Stack direction="row" spacing="2">
        <Arrow
          direction="LEFT"
          isFirstPage={currentPage === 1}
          page={currentPage}
          setPage={onPageChange}
        />
        {currentPage > 1 + siblingsCount && (
          <>
            <PaginationItem onPageChange={onPageChange} number={1} />
            {currentPage > 2 + siblingsCount && (
              <Button
                display="flex"
                alignItems="center"
                variant={ButtonVariants.OUTLINE}
                flexDirection="column"
                _hover={{}}
                pointerEvents="none"
              >
                ...
              </Button>
            )}
          </>
        )}

        {previousPage.length > 0 &&
          previousPage.map((page) => {
            return (
              <PaginationItem
                onPageChange={onPageChange}
                key={page}
                number={page}
              />
            );
          })}

        <PaginationItem
          onPageChange={onPageChange}
          number={currentPage}
          isCurrent
        />

        {nextPages.length > 0 &&
          nextPages.map((page) => {
            return (
              <PaginationItem
                onPageChange={onPageChange}
                key={page}
                number={page}
              />
            );
          })}

        {currentPage + siblingsCount < lastPage && (
          <>
            {currentPage + 1 + siblingsCount < lastPage && (
              <Button
                variant={ButtonVariants.OUTLINE}
                display="flex"
                alignItems="center"
                flexDirection="column"
                _hover={{}}
                pointerEvents="none"
              >
                ...
              </Button>
            )}
            <PaginationItem onPageChange={onPageChange} number={lastPage} />
          </>
        )}
        <Arrow
          direction="RIGHT"
          isLastPage={currentPage === lastPage}
          page={currentPage}
          setPage={onPageChange}
        />
      </Stack>
    </Stack>
  );
}