Pagination

1"use client";
2 
3import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
4import { forwardRef } from "react";
5import { cn } from "@/lib/utils";
6import { buttonVariants } from "@/components/ui/button";
7 
8export function Pagination({
9  className,
10  ...props
11}: React.ComponentProps<"nav">) {
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 
23export function PaginationContent({
24  className,
25  ...props
26}: React.ComponentProps<"ul">) {
27  return (
28    <ul
29      data-slot="pagination-content"
30      className={cn(
31        "flex flex-row items-center gap-1 list-none p-0 m-0",
32        className,
33      )}
34      {...props}
35    />
36  );
37}
38 
39export function PaginationItem({
40  className,
41  ...props
42}: React.ComponentProps<"li">) {
43  return (
44    <li
45      data-slot="pagination-item"
46      className={cn("list-none", className)}
47      {...props}
48    />
49  );
50}
51 
52export type PaginationLinkProps = React.ComponentProps<"a"> & {
53  isActive?: boolean;
54};
55 
56export const PaginationLink = forwardRef<
57  HTMLAnchorElement,
58  PaginationLinkProps
59>(({ className, isActive, ...props }, ref) => (
60  <a
61    ref={ref}
62    aria-current={isActive ? "page" : undefined}
63    data-slot="pagination-link"
64    data-active={isActive}
65    className={cn(
66      buttonVariants({
67        variant: isActive ? "default" : "glass",
68        size: "icon",
69      }),
70      "size-9 min-w-9 no-underline hover:no-underline",
71      className,
72    )}
73    {...props}
74  />
75));
76PaginationLink.displayName = "PaginationLink";
77 
78export function PaginationPrevious({
79  className,
80  ...props
81}: React.ComponentProps<"a">) {
82  return (
83    <a
84      aria-label="Go to previous page"
85      data-slot="pagination-previous"
86      className={cn(
87        buttonVariants({ variant: "glass", size: "md" }),
88        "inline-flex h-9 items-center gap-1 rounded-full px-3 sm:pl-2.5 no-underline hover:no-underline",
89        className,
90      )}
91      {...props}
92    >
93      <ChevronLeft className="size-4 shrink-0" />
94      <span className="hidden sm:inline">Previous</span>
95    </a>
96  );
97}
98 
99export function PaginationNext({
100  className,
101  ...props
102}: React.ComponentProps<"a">) {
103  return (
104    <a
105      aria-label="Go to next page"
106      data-slot="pagination-next"
107      className={cn(
108        buttonVariants({ variant: "glass", size: "md" }),
109// … truncated