pagination

1"use client"
2 
3import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
4import {
5  Pagination as PaginationPrimitive,
6  paginationAnatomy,
7} from "@ark-ui/react/pagination"
8import type { VariantProps } from "class-variance-authority"
9import { MoreHorizontal } from "lucide-react"
10import * as React from "react"
11 
12import { buttonVariants } from "@/components/ui/button"
13import { cn } from "@/lib/utils"
14 
15const parts = paginationAnatomy.extendWith("content").build()
16 
17const Pagination = React.forwardRef<
18  React.ElementRef<typeof PaginationPrimitive.Root>,
19  Omit<PaginationPrimitive.RootProps, "type">
20>(({ className, ...props }, ref) => (
21  <PaginationPrimitive.Root
22    ref={ref}
23    className={cn(
24      "mx-auto flex w-full flex-row items-center justify-center gap-1",
25      className
26    )}
27    {...props}
28  />
29))
30Pagination.displayName = "Pagination"
31 
32const PaginationContent = React.forwardRef<
33  HTMLUListElement,
34  HTMLArkProps<"ul">
35>(({ className, ...props }, ref) => (
36  <ark.ul
37    ref={ref}
38    {...parts.content.attrs}
39    className={cn("flex flex-row items-center gap-1", className)}
40    {...props}
41  />
42))
43PaginationContent.displayName = "PaginationContent"
44 
45const PaginationContext = PaginationPrimitive.Context
46 
47const PaginationEllipsis = React.forwardRef<
48  React.ElementRef<typeof PaginationPrimitive.Ellipsis>,
49  PaginationPrimitive.EllipsisProps
50>(({ className, ...props }, ref) => (
51  <ark.li>
52    <PaginationPrimitive.Ellipsis
53      ref={ref}
54      aria-hidden
55      className={cn("flex h-9 w-9 items-center justify-center", className)}
56      {...props}
57    >
58      <MoreHorizontal className="h-4 w-4" />
59      <span className="sr-only">More pages</span>
60    </PaginationPrimitive.Ellipsis>
61  </ark.li>
62))
63PaginationEllipsis.displayName = "PaginationEllipsis"
64 
65export interface PaginationItemProps
66  extends PaginationPrimitive.ItemProps,
67    VariantProps<typeof buttonVariants> {}
68 
69const PaginationItem = React.forwardRef<
70  React.ElementRef<typeof PaginationPrimitive.Item>,
71  PaginationItemProps
72>(({ className, variant = "outline", size, ...props }, ref) => (
73  <ark.li>
74    <PaginationPrimitive.Item
75      ref={ref}
76      className={cn(buttonVariants({ variant, size }), className)}
77      {...props}
78    />
79  </ark.li>
80))
81PaginationItem.displayName = "PaginationItem"
82 
83export interface PaginationNextTriggerProps
84  extends PaginationPrimitive.NextTriggerProps,
85    VariantProps<typeof buttonVariants> {}
86 
87const PaginationNextTrigger = React.forwardRef<
88// … truncated