Pagination

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