Pagination

1import { ComponentProps } from "react";
2
3import { cn } from "@/lib/utils";
4import { Button } from "@/components/ui/button";
5import {
6  ChevronLeftIcon,
7  ChevronRightIcon,
8  MoreHorizontalIcon
9} from "lucide-react";
10
11function Pagination({ className, ...props }: ComponentProps<"nav">) {
12  return (
13    <nav
14      role="navigation"
15      aria-label="pagination"
16      data-slot="pagination"
17      className={cn("mx-auto flex w-full justify-center", className)}
18      {...props}
19    />
20  );
21}
22
23function PaginationContent({
24  className,
25  ...props
26}: ComponentProps<"ul">) {
27  return (
28    <ul
29      data-slot="pagination-content"
30      className={cn("flex items-center gap-0.5", className)}
31      {...props}
32    />
33  );
34}
35
36function PaginationItem({ ...props }: ComponentProps<"li">) {
37  return <li data-slot="pagination-item" {...props} />;
38}
39
40type PaginationLinkProps = {
41  isActive?: boolean;
42} & Pick<ComponentProps<typeof Button>, "size"> &
43  ComponentProps<"a">;
44
45function PaginationLink({
46  className,
47  isActive,
48  size = "icon",
49  ...props
50}: PaginationLinkProps) {
51  return (
52    <Button
53      variant={isActive ? "default" : "ghost"}
54      size={size}
55      className={cn(className)}
56      nativeButton={false}
57      render={
58        <a
59          aria-current={isActive ? "page" : undefined}
60          data-slot="pagination-link"
61          data-active={isActive}
62          {...props}
63        />
64      }
65    />
66  );
67}
68
69function PaginationPrevious({
70  className,
71  text = "Previous",
72  ...props
73}: ComponentProps<typeof PaginationLink> & { text?: string }) {
74  return (
75    <PaginationLink
76      aria-label="Go to previous page"
77      size="default"
78      className={cn("gap-1", className)}
79      {...props}
80    >
81      <ChevronLeftIcon data-icon="inline-start" />
82      <span className="hidden sm:block">{text}</span>
83    </PaginationLink>
84  );
85}
86
87function PaginationNext({
88  className,
89  text = "Next",
90  ...props
91}: ComponentProps<typeof PaginationLink> & { text?: string }) {
92  return (
93    <PaginationLink
94      aria-label="Go to next page"
95      size="default"
96      className={cn("gap-1", className)}
97      {...props}
98    >
99      <span className="hidden sm:block">{text}</span>
100      <ChevronRightIcon data-icon="inline-end" />
101    </PaginationLink>
102  );
103}
104
105function PaginationEllipsis({
106  className,
107  ...props
108}: ComponentProps<"span">) {
109  return (
110    <span
111// … truncated