pagination

1import * as React from "react"
2import {
3  ChevronLeftIcon,
4  ChevronRightIcon,
5  MoreHorizontalIcon,
6} from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9import { Button } from "@/components/ui/button"
10 
11function Pagination({ className, ...props }: React.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}: React.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 }: React.ComponentProps<"li">) {
37  return <li data-slot="pagination-item" {...props} />
38}
39 
40type PaginationLinkProps = {
41  isActive?: boolean
42} & Pick<React.ComponentProps<typeof Button>, "size"> &
43  React.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}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
74  return (
75    <PaginationLink
76      aria-label="Go to previous page"
77      size="default"
78      className={cn("pl-1.5!", className)}
79      {...props}
80    >
81      <ChevronLeftIcon data-icon="inline-start" className="cn-rtl-flip" />
82      <span className="hidden sm:block">{text}</span>
83    </PaginationLink>
84  )
85}
86 
87function PaginationNext({
88  className,
89  text = "Next",
90  ...props
91}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
92  return (
93    <PaginationLink
94      aria-label="Go to next page"
95      size="default"
96      className={cn("pr-1.5!", className)}
97      {...props}
98    >
99      <span className="hidden sm:block">{text}</span>
100      <ChevronRightIcon data-icon="inline-end" className="cn-rtl-flip" />
101    </PaginationLink>
102  )
103}
104 
105function PaginationEllipsis({
106  className,
107  ...props
108}: React.ComponentProps<"span">) {
109  return (
110    <span
111      aria-hidden
112// … truncated