pagination

1import { Button, buttonVariants } from "@/components/ui/button"
2import { cn } from "@/lib/utils"
3import {
4  ChevronLeftIcon,
5  ChevronRightIcon,
6  MoreHorizontalIcon,
7} from "lucide-react"
8import * as React from "react"
9 
10function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
11  return (
12    <nav
13      role="navigation"
14      aria-label="pagination"
15      data-slot="pagination"
16      className={cn("mx-auto flex w-full justify-center", className)}
17      {...props}
18    />
19  )
20}
21 
22function PaginationContent({
23  className,
24  ...props
25}: React.ComponentProps<"ul">) {
26  return (
27    <ul
28      data-slot="pagination-content"
29      className={cn("flex flex-row items-center gap-1", className)}
30      {...props}
31    />
32  )
33}
34 
35function PaginationItem({ ...props }: React.ComponentProps<"li">) {
36  return <li data-slot="pagination-item" {...props} />
37}
38 
39type PaginationLinkProps = {
40  isActive?: boolean
41} & Pick<React.ComponentProps<typeof Button>, "size"> &
42  React.ComponentProps<"a">
43 
44function PaginationLink({
45  className,
46  isActive,
47  size = "icon",
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({
57          variant: isActive ? "outline" : "ghost",
58          size,
59        }),
60        className,
61      )}
62      {...props}
63    />
64  )
65}
66 
67function PaginationPrevious({
68  className,
69  ...props
70}: React.ComponentProps<typeof PaginationLink>) {
71  return (
72    <PaginationLink
73      aria-label="Go to previous page"
74      size="default"
75      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
76      {...props}
77    >
78      <ChevronLeftIcon />
79      <span className="hidden sm:block">Previous</span>
80    </PaginationLink>
81  )
82}
83 
84function PaginationNext({
85  className,
86  ...props
87}: React.ComponentProps<typeof PaginationLink>) {
88  return (
89    <PaginationLink
90      aria-label="Go to next page"
91      size="default"
92      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
93      {...props}
94    >
95      <span className="hidden sm:block">Next</span>
96      <ChevronRightIcon />
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      className={cn("flex size-9 items-center justify-center", className)}
110      {...props}
111    >
112      <MoreHorizontalIcon className="size-4" />
113// … truncated