Pagination

1import { mdiChevronLeft, mdiChevronRight, mdiDotsHorizontal } from "@mdi/js";
2import type * as React from "react";
3 
4import { type Button, buttonVariants } from "@/components/ui/button";
5import { Icon } from "@/lib/icon";
6import { cn } from "@/lib/utils";
7 
8function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
9  return (
10    <nav
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 flex-row items-center gap-1", 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 
41function PaginationLink({
42  className,
43  isActive,
44  size = "icon",
45  ...props
46}: PaginationLinkProps) {
47  return (
48    <a
49      aria-current={isActive ? "page" : undefined}
50      data-slot="pagination-link"
51      data-active={isActive}
52      className={cn(
53        buttonVariants({
54          colorScheme: "neutral",
55          size,
56        }),
57        "text-neutral-fg bg-transparent disabled:text-neutral-fg/40 font-medium hover:bg-neutral-bg active:bg-primary-bg",
58        isActive &&
59          "bg-primary-bg text-neutral-fg hover:bg-primary-bg active:bg-primary-bg font-medium",
60        className,
61      )}
62      {...props}
63    />
64  );
65}
66 
67function PaginationPrevious({
68  className,
69  ...props
70}: React.ComponentProps<typeof PaginationLink>) {
71  return (
72    <PaginationLink
73      aria-label="Go to previous page"
74      size="icon"
75      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
76      {...props}
77    >
78      <Icon path={mdiChevronLeft} size={1} />
79    </PaginationLink>
80  );
81}
82 
83function PaginationNext({
84  className,
85  ...props
86}: React.ComponentProps<typeof PaginationLink>) {
87  return (
88    <PaginationLink
89      aria-label="Go to next page"
90      size="icon"
91      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
92      {...props}
93    >
94      <Icon path={mdiChevronRight} size={1} />
95    </PaginationLink>
96  );
97}
98 
99function PaginationEllipsis({
100  className,
101  ...props
102}: React.ComponentProps<"span">) {
103  return (
104    <span
105      aria-hidden
106// … truncated