pagination

1"use client"
2
3import * as React from "react"
4import { cn } from "@/lib/utils"
5
6export type PaginationProps = React.HTMLAttributes<HTMLDivElement>
7
8const Pagination = React.forwardRef<HTMLDivElement, PaginationProps>(
9    ({ className, onKeyDown, ...props }, ref) => {
10        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
11            onKeyDown?.(event)
12            if (event.defaultPrevented) return
13
14            if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return
15
16            const items = Array.from(
17                event.currentTarget.querySelectorAll<HTMLButtonElement>("button:not(:disabled)")
18            )
19            if (items.length === 0) return
20
21            const activeElement = document.activeElement as HTMLElement | null
22            const currentIndex = items.findIndex((item) => item === activeElement)
23
24            let nextIndex = currentIndex
25            if (event.key === "Home") {
26                nextIndex = 0
27            } else if (event.key === "End") {
28                nextIndex = items.length - 1
29            } else if (event.key === "ArrowRight") {
30                nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length
31            } else if (event.key === "ArrowLeft") {
32                nextIndex = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length
33            }
34
35            items[nextIndex]?.focus()
36            event.preventDefault()
37        }
38
39        return (
40            <nav
41                ref={ref}
42                aria-label="Pagination"
43                className={cn("flex items-center justify-center border-2 border-black rounded-base", className)}
44                onKeyDown={handleKeyDown}
45                {...props}
46            />
47        )
48    }
49)
50Pagination.displayName = "Pagination"
51
52export type PaginationItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
53    isActive?: boolean
54}
55
56const PaginationItem = React.forwardRef<HTMLButtonElement, PaginationItemProps>(
57    ({ className, isActive, ...props }, ref) => (
58        <button
59            ref={ref}
60            className={cn(
61                "inline-flex h-10 w-10 items-center justify-center text-sm font-bold transition-colors focus-brutal border-r-2 border-black last:border-r-0",
62                isActive
63                    ? "bg-main text-black"
64                    : "bg-white text-black hover:bg-neutral-50",
65// … truncated