Warcraft Pagination

1import * as React from "react";
2import { ChevronLeft, ChevronRight } from "lucide-react";
3 
4import { cn } from "@/lib/utils";
5import { buttonVariants } from "@/components/ui/warcraftcn/button";
6 
7import "@/components/ui/warcraftcn/styles/warcraft.css";
8 
9const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
10  <nav
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 list-none", 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  disabled?: boolean;
41} & React.ComponentProps<"a">;
42 
43const PaginationLink = ({
44  className,
45  isActive,
46  disabled,
47  ...props
48}: PaginationLinkProps) => (
49  <a
50    aria-current={isActive ? "page" : undefined}
51    aria-disabled={disabled ? "true" : undefined}
52    tabIndex={disabled ? -1 : undefined}
53    className={cn(
54      buttonVariants({
55        variant: "frame",
56      }),
57      "border-solid [border-image-repeat:stretch] border-5 [border-image-slice:16_fill] wc-btn-border-frame transition-all duration-200",
58      "w-10 h-10 px-0 sm:w-12 sm:h-12 flex items-center justify-center font-bold no-underline",
59      isActive
60        ? "text-amber-200 [text-shadow:0_0_8px_rgba(251,191,36,0.6)] shadow-[inset_0_0_10px_rgba(0,0,0,0.8)] brightness-110"
61        : "text-amber-100/70 hover:text-amber-100 hover:brightness-110",
62      disabled && "opacity-50 pointer-events-none cursor-not-allowed",
63      className
64    )}
65    {...props}
66  />
67);
68PaginationLink.displayName = "PaginationLink";
69 
70const PaginationPrevious = ({
71  className,
72  ...props
73}: React.ComponentProps<typeof PaginationLink>) => (
74  <PaginationLink
75    aria-label="Go to previous page"
76    className={cn("gap-1 sm:w-auto sm:px-4 sm:pr-5", className)}
77    {...props}
78  >
79    <ChevronLeft className="h-4 w-4 text-amber-500 filter-[drop-shadow(0_0_2px_rgba(245,158,11,0.5))]" />
80    <span className="hidden sm:block">Previous</span>
81// … truncated