Pagination

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4import { Button } from "@/components/ui/button"
5import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-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-0.5", 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 
41// Pagination uses mono 13px text, an ink-filled active page, and prev/next chevrons.
42// Active page is ink-filled (foreground bg + background text); surrounding
43// pages are line-bordered on the touchable surface.
44function PaginationLink({
45  className,
46  isActive,
47  size = "icon",
48  ...props
49}: PaginationLinkProps) {
50  return (
51    <Button
52      asChild
53      variant={isActive ? "default" : "outline"}
54      size={size}
55      className={cn(
56        "font-mono text-[13px]",
57        isActive && "bg-foreground text-background hover:bg-foreground/90",
58        className,
59      )}
60    >
61      <a
62        aria-current={isActive ? "page" : undefined}
63        data-slot="pagination-link"
64        data-active={isActive}
65        {...props}
66      />
67    </Button>
68  )
69}
70 
71function PaginationPrevious({
72  className,
73  text = "Previous",
74  ...props
75}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
76  return (
77    <PaginationLink
78      aria-label="Go to previous page"
79      size="default"
80      className={cn("pl-1.5!", className)}
81      {...props}
82    >
83      <ChevronLeftIcon data-icon="inline-start" />
84      <span className="hidden sm:block">{text}</span>
85    </PaginationLink>
86  )
87}
88 
89function PaginationNext({
90  className,
91  text = "Next",
92  ...props
93}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
94  return (
95    <PaginationLink
96      aria-label="Go to next page"
97      size="default"
98      className={cn("pr-1.5!", className)}
99      {...props}
100    >
101// … truncated