pagination

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4import { Button } from "@/components/ui/button"
5import { IconChevronLeft, IconChevronRight, IconDots } from "@tabler/icons-react"
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("flex items-center gap-1", className)}
27      {...props}
28    />
29  )
30}
31 
32function PaginationItem({ ...props }: React.ComponentProps<"li">) {
33  return <li data-slot="pagination-item" {...props} />
34}
35 
36type PaginationLinkProps = {
37  isActive?: boolean
38} & Pick<React.ComponentProps<typeof Button>, "size"> &
39  React.ComponentProps<"a">
40 
41function PaginationLink({
42  className,
43  isActive,
44  size = "icon",
45  ...props
46}: PaginationLinkProps) {
47  return (
48    <Button
49      variant={isActive ? "outline" : "ghost"}
50      size={size}
51      className={cn(className)}
52      nativeButton={false}
53      render={
54        <a
55          aria-current={isActive ? "page" : undefined}
56          data-slot="pagination-link"
57          data-active={isActive}
58          {...props}
59        />
60      }
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-2!", className)}
75      {...props}
76    >
77      <IconChevronLeft 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-2!", className)}
93      {...props}
94    >
95      <span className="hidden sm:block">{text}</span>
96      <IconChevronRight 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      className={cn(
110// … truncated