pagination

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