openstatus.dev
Openstatus
www.openstatus.dev
1import * as React from "react";
2import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
3import Link from "next/link";
4
5import { cn } from "@/lib/utils";
6import { ButtonProps, buttonVariants } from "./button";
7
8const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
9 <nav
10 role="navigation"
11 aria-label="pagination"
12 className={cn("mx-auto flex w-full justify-center", className)}
13 {...props}
14 />
15);
16Pagination.displayName = "Pagination";
17
18const PaginationContent = React.forwardRef<
19 HTMLUListElement,
20 React.ComponentProps<"ul">
21>(({ className, ...props }, ref) => (
22 <ul
23 ref={ref}
24 className={cn("flex flex-row items-center gap-1", className)}
25 {...props}
26 />
27));
28PaginationContent.displayName = "PaginationContent";
29
30const PaginationItem = React.forwardRef<
31 HTMLLIElement,
32 React.ComponentProps<"li">
33>(({ className, ...props }, ref) => (
34 <li ref={ref} className={cn("", className)} {...props} />
35));
36PaginationItem.displayName = "PaginationItem";
37
38type PaginationLinkProps = {
39 isActive?: boolean;
40} & Pick<ButtonProps, "size"> &
41 React.ComponentProps<typeof Link>;
42
43const PaginationLink = ({
44 className,
45 isActive,
46 size = "icon",
47 ...props
48}: PaginationLinkProps) => (
49 <Link
50 aria-current={isActive ? "page" : undefined}
51 className={cn(
52 buttonVariants({
53 variant: isActive ? "outline" : "ghost",
54 size,
55 }),
56 className
57 )}
58 {...props}
59 />
60);
61PaginationLink.displayName = "PaginationLink";
62
63const PaginationPrevious = ({
64 className,
65 ...props
66}: React.ComponentProps<typeof PaginationLink>) => (
67 <PaginationLink
68 aria-label="Go to previous page"
69 size="default"
70 className={cn("gap-1 pl-2.5", className)}
71 {...props}
72 >
73 <ChevronLeft className="h-4 w-4" />
74 <span>Prev</span>
75 </PaginationLink>
76);
77PaginationPrevious.displayName = "PaginationPrevious";
78
79const PaginationNext = ({
80 className,
81 ...props
82}: React.ComponentProps<typeof PaginationLink>) => (
83 <PaginationLink
84 aria-label="Go to next page"
85 size="default"
86 className={cn("gap-1 pr-2.5", className)}
87 {...props}
88 >
89 <span>Next</span>
90 <ChevronRight className="h-4 w-4" />
91 </PaginationLink>
92);
93PaginationNext.displayName = "PaginationNext";
94
95const PaginationEllipsis = ({
96 className,
97 ...props
98}: React.ComponentProps<"span">) => (
99 <span
100 aria-hidden
101 className={cn("flex h-9 w-9 items-center justify-center", className)}
102 {...props}
103 >
104 <MoreHorizontal className="h-4 w-4" />
105 <span className="sr-only">More pages</span>
106 </span>
107);
108PaginationEllipsis.displayName = "PaginationEllipsis";
109
110export {
111 Pagination,
112 PaginationContent,
113 PaginationEllipsis,
114 PaginationItem,
115 PaginationLink,
116 PaginationNext,
117 PaginationPrevious,
118};