Pagination

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