Pagination

1import * as React from "react";
2import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5import { buttonVariants } from "@/components/ui/button";
6 
7function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
8  return (
9    <nav
10      role="navigation"
11      aria-label="pagination"
12      data-slot="pagination"
13      className={cn("mx-auto flex w-full justify-center", className)}
14      {...props}
15    />
16  );
17}
18 
19function PaginationContent({
20  className,
21  ...props
22}: React.ComponentProps<"ul">) {
23  return (
24    <ul
25      data-slot="pagination-content"
26      className={cn(
27        "flex items-center gap-1 rounded-2xl border border-foreground/10 bg-background/70 p-1.5 shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_75%,transparent)]",
28        className,
29      )}
30      {...props}
31    />
32  );
33}
34 
35function PaginationItem(props: React.ComponentProps<"li">) {
36  return <li data-slot="pagination-item" {...props} />;
37}
38 
39type PaginationLinkProps = React.ComponentProps<"a"> & {
40  isActive?: boolean;
41  size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
42};
43 
44function PaginationLink({
45  className,
46  isActive,
47  size = "icon-sm",
48  ...props
49}: PaginationLinkProps) {
50  return (
51    <a
52      aria-current={isActive ? "page" : undefined}
53      data-slot="pagination-link"
54      data-active={isActive}
55      className={cn(
56        buttonVariants({ variant: isActive ? "secondary" : "ghost", size }),
57        "hover:-translate-y-0",
58        className,
59      )}
60      {...props}
61    />
62  );
63}
64 
65function PaginationPrevious({
66  className,
67  ...props
68}: React.ComponentProps<typeof PaginationLink>) {
69  return (
70    <PaginationLink
71      aria-label="Go to previous page"
72      size="sm"
73      className={cn("gap-1 pl-2.5", className)}
74      {...props}
75    >
76      <ChevronLeft />
77      <span className="hidden sm:inline">Previous</span>
78    </PaginationLink>
79  );
80}
81 
82function PaginationNext({
83  className,
84  ...props
85}: React.ComponentProps<typeof PaginationLink>) {
86  return (
87    <PaginationLink
88      aria-label="Go to next page"
89      size="sm"
90      className={cn("gap-1 pr-2.5", className)}
91      {...props}
92    >
93      <span className="hidden sm:inline">Next</span>
94      <ChevronRight />
95    </PaginationLink>
96  );
97}
98 
99function PaginationEllipsis({
100  className,
101  ...props
102}: React.ComponentProps<"span">) {
103  return (
104    <span
105      aria-hidden
106      data-slot="pagination-ellipsis"
107      className={cn(
108// … truncated