Pagination

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
5 
6const paginationLinkClassName =
7  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-base border-2 border-border bg-main text-sm font-base text-main-foreground ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
8 
9const paginationLinkSizeClassNames = {
10  default: "h-10 px-4 py-2",
11  sm: "h-9 px-3",
12  lg: "h-11 px-8",
13  icon: "size-10",
14};
15 
16function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
17  return (
18    <nav
19      role="navigation"
20      aria-label="pagination"
21      data-slot="pagination"
22      className={cn("mx-auto flex w-full justify-center", className)}
23      {...props}
24    />
25  );
26}
27 
28function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
29  return (
30    <ul
31      data-slot="pagination-content"
32      className={cn("flex flex-row items-center gap-1", className)}
33      {...props}
34    />
35  );
36}
37 
38function PaginationItem({ className, ...props }: React.ComponentProps<"li">) {
39  return <li data-slot="pagination-item" className={cn("", className)} {...props} />;
40}
41 
42type PaginationLinkProps = {
43  isActive?: boolean;
44  size?: "default" | "sm" | "lg" | "icon";
45} & React.ComponentProps<"a">;
46 
47function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
48  return (
49    <a
50      data-slot="pagination-link"
51      aria-current={isActive ? "page" : undefined}
52      className={cn(
53        paginationLinkClassName,
54        paginationLinkSizeClassNames[size],
55        className,
56        isActive && "bg-black text-white",
57      )}
58      {...props}
59    />
60  );
61}
62 
63function PaginationPrevious({
64  className,
65  text = "Previous",
66  ...props
67}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
68  return (
69    <PaginationLink
70      data-slot="pagination-previous"
71      aria-label="Go to previous page"
72      size="default"
73      className={cn("gap-1 pl-2.5", className)}
74      {...props}
75    >
76      <ChevronLeftIcon className="size-4" />
77      <span>{text}</span>
78    </PaginationLink>
79  );
80}
81 
82function PaginationNext({
83  className,
84  text = "Next",
85  ...props
86// … truncated