Pagination

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4import { Button } from "@/components/ui/button"
5import { ArrowLeftIcon, ArrowRightIcon, MoreHorizontalIcon } from "lucide-react"
6import { Separator } from "@/components/ui/separator"
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("w-full", className)}
15      {...props}
16    >
17      <Separator className="mb-4" />
18      <div className="flex w-full items-center justify-between">
19        {props.children}
20      </div>
21    </nav>
22  )
23}
24 
25function PaginationContent({
26  className,
27  ...props
28}: React.ComponentProps<"ul">) {
29  return (
30    <ul
31      data-slot="pagination-content"
32      className={cn("gap-2 flex items-center justify-center flex-1", className)}
33      {...props}
34    />
35  )
36}
37 
38function PaginationItem({ ...props }: React.ComponentProps<"li">) {
39  return <li data-slot="pagination-item" {...props} />
40}
41 
42type PaginationLinkProps = {
43  isActive?: boolean
44} & Pick<React.ComponentProps<typeof Button>, "size"> &
45  React.ComponentProps<"a">
46 
47function PaginationLink({
48  className,
49  isActive,
50  size = "icon",
51  ...props
52}: PaginationLinkProps) {
53  return (
54    <a
55      aria-current={isActive ? "page" : undefined}
56      data-slot="pagination-link"
57      data-active={isActive}
58      className={cn(
59        "inline-flex items-center justify-center h-9 min-w-9 px-2 text-sm font-medium transition-colors",
60        isActive
61          ? "text-treasury-primary font-bold"
62          : "text-treasury-base-dark hover:text-treasury-primary",
63        className
64      )}
65      {...props}
66    />
67  )
68}
69 
70function PaginationPrevious({
71  className,
72  ...props
73}: React.ComponentProps<typeof PaginationLink>) {
74  return (
75    <a
76      aria-label="Go to previous page"
77      data-slot="pagination-previous"
78      className={cn(
79        "inline-flex items-center justify-center h-9 w-9 text-treasury-base-dark hover:text-treasury-primary transition-colors",
80        className
81      )}
82      {...props}
83    >
84      <ArrowLeftIcon className="h-5 w-5" />
85    </a>
86  )
87}
88 
89function PaginationNext({
90  className,
91  ...props
92}: React.ComponentProps<typeof PaginationLink>) {
93  return (
94    <a
95      aria-label="Go to next page"
96      data-slot="pagination-next"
97      className={cn(
98// … truncated