nej-react-components/Parts/Pagination.js

import Button from "./Button";
import tw, { styled } from "twin.macro";

const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]);

function CustomBtn({ children, setPage, currentPage, page, ...props }) {
  return (
    <Btn onClick={() => setPage(page)} active={page == currentPage} {...props}>
      {children}
    </Btn>
  );
}

export default function Pagination({ currentPage, maxPages, setPage, ...props }) {
  function RenderButtons() {
    switch (maxPages) {
    case 1:
      return (
        <CustomBtn tw="rounded-xl" setPage={setPage} page={1} currentPage={currentPage}>
            1
        </CustomBtn>
      );
    case 2:
      return (
        <>
          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
              1
          </CustomBtn>
          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={2} currentPage={currentPage}>
              2
          </CustomBtn>
        </>
      );
    case 3:
      return (
        <>
          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
              1
          </CustomBtn>
          <CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
              2
          </CustomBtn>
          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={3} currentPage={currentPage}>
              3
          </CustomBtn>
        </>
      );
    case 4:
      return (
        <>
          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
              1
          </CustomBtn>
          <CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
              2
          </CustomBtn>
          <CustomBtn setPage={setPage} page={3} currentPage={currentPage}>
              3
          </CustomBtn>
          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={4} currentPage={currentPage}>
              4
          </CustomBtn>
        </>
      );
    case 5:
      return (
        <>
          <CustomBtn tw="rounded-l-xl" setPage={setPage} page={1} currentPage={currentPage}>
              1
          </CustomBtn>
          <CustomBtn setPage={setPage} page={2} currentPage={currentPage}>
              2
          </CustomBtn>
          <CustomBtn setPage={setPage} page={3} currentPage={currentPage}>
              3
          </CustomBtn>
          <CustomBtn setPage={setPage} page={4} currentPage={currentPage}>
              4
          </CustomBtn>
          <CustomBtn tw="rounded-r-xl" setPage={setPage} page={5} currentPage={currentPage}>
              5
          </CustomBtn>
        </>
      );
    default: {
      let firstItem = Math.min(Math.max(currentPage - 2, 1), maxPages - 4);
      let secondItem = Math.min(Math.max(currentPage - 1, 2), maxPages - 3);
      let thirdItem = Math.min(Math.max(currentPage, 3), maxPages - 2);
      let fourthItem = Math.min(Math.max(currentPage + 1, 4), maxPages - 1);
      let fifthItem = Math.min(Math.max(currentPage + 2, 5), maxPages);

      return (
        <>
          <CustomBtn css={[tw`rounded-l-xl`]} page={firstItem} setPage={setPage} currentPage={currentPage}>
            {firstItem != 1 ? <>&lt;</> : firstItem}
          </CustomBtn>

          <CustomBtn setPage={setPage} page={secondItem} currentPage={currentPage}>
            {secondItem}
          </CustomBtn>
          <CustomBtn setPage={setPage} page={thirdItem} currentPage={currentPage}>
            {thirdItem}
          </CustomBtn>
          <CustomBtn setPage={setPage} page={fourthItem} currentPage={currentPage}>
            {fourthItem}
          </CustomBtn>
          <CustomBtn css={[tw`rounded-r-xl`]} page={fifthItem} setPage={setPage} currentPage={currentPage}>
            {fifthItem != maxPages ? <>&gt;</> : fifthItem}
          </CustomBtn>
        </>
      );
    }
    }
  }

  return (
    <div {...props}>
      <RenderButtons />
    </div>
  );
}