Pagination

1"use client";
2 
3import {
4  Pagination as PaginationComponent,
5  PaginationContent,
6  PaginationEllipsis,
7  PaginationItem,
8  PaginationLink,
9  PaginationNext,
10  PaginationPrevious,
11} from "@/components/ui/pagination";
12import { paginate } from "@/lib/paginate";
13import { useMemo } from "react";
14 
15interface PaginationProps {
16  currentPage: number;
17  totalPages: number;
18  siblings?: number;
19  onChange: (page: number) => void;
20}
21 
22export const Pagination = ({
23  currentPage,
24  totalPages,
25  siblings = 2,
26  onChange,
27}: PaginationProps) => {
28  const { prev, next, current, items } = useMemo(() => {
29    return paginate({
30      currentPage: currentPage + 1,
31      totalPages,
32      siblings,
33    });
34  }, [currentPage, totalPages, siblings]);
35 
36  return (
37    <PaginationComponent>
38      <PaginationContent>
39        <PaginationItem>
40          <PaginationPrevious
41            className="cursor-pointer"
42            onClick={() => {
43              if (prev === null) return;
44              onChange(prev - 1);
45            }}
46          />
47        </PaginationItem>
48        {items.map((item) => {
49          if (item.type === "item") {
50            return (
51              <PaginationItem key={`${item.type}-${item.value}`}>
52                <PaginationLink
53                  className="cursor-pointer"
54                  isActive={item.value === current}
55                  onClick={() => {
56                    onChange(item.value - 1);
57                  }}
58                >
59                  {item.value}
60                </PaginationLink>
61              </PaginationItem>
62            );
63          }
64          if (item.type === "ellipsis") {
65            return (
66              <PaginationItem key={`${item.type}-${item.value}`}>
67                <PaginationEllipsis
68                  className="cursor-pointer"
69                  onClick={() => {
70                    onChange(item.value - 1);
71                  }}
72                />
73              </PaginationItem>
74            );
75          }
76        })}
77        <PaginationItem>
78          <PaginationNext
79            className="cursor-pointer"
80            onClick={() => {
81              if (next === null) return;
82              onChange(next - 1);
83            }}
84          />
85        </PaginationItem>
86      </PaginationContent>
87    </PaginationComponent>
88  );
89};