Warcraft Accordion

1"use client";
2 
3import * as React from "react";
4import { Accordion as AccordionPrimitive } from "radix-ui";
5import { cva, type VariantProps } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9import "@/components/ui/warcraftcn/styles/warcraft.css";
10 
11const accordionRootVariants = cva("flex w-full flex-col", {
12  variants: {
13    variant: {
14      default:
15        "fantasy rounded-xl relative flex gap-2 py-[0.6rem] px-[0.7rem] text-[hsl(0_0%_95%)] bg-transparent shadow-none before:content-none after:content-none",
16    },
17  },
18  defaultVariants: {
19    variant: "default",
20  },
21});
22 
23type AccordionVariantProps = VariantProps<typeof accordionRootVariants>;
24 
25const AccordionStyleContext = React.createContext<{
26  variant: NonNullable<AccordionVariantProps["variant"]>;
27}>({
28  variant: "default",
29});
30 
31function Accordion({
32  className,
33  variant,
34  ...props
35}: React.ComponentProps<typeof AccordionPrimitive.Root> &
36  AccordionVariantProps) {
37  const resolvedVariant = variant ?? "default";
38  return (
39    <AccordionStyleContext.Provider value={{ variant: resolvedVariant }}>
40      <AccordionPrimitive.Root
41        data-slot="accordion"
42        className={cn(accordionRootVariants({ variant }), className)}
43        {...props}
44      />
45    </AccordionStyleContext.Provider>
46  );
47}
48 
49function AccordionItem({
50  className,
51  ...props
52}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
53  return (
54    <AccordionPrimitive.Item
55      data-slot="accordion-item"
56      className={cn(className)}
57      {...props}
58    />
59  );
60}
61 
62function AccordionTrigger({
63  className,
64  children,
65  icon = "sword",
66  ...props
67}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
68  icon?: "sword" | "shield" | "rune-stone";
69}) {
70  return (
71    <AccordionPrimitive.Header
72      className={cn(
73        "flex",
74 
75        "border-solid wc-accordion-header-border [border-image-repeat:stretch]",
76        "border-6 [border-image-slice:16_fill]",
77        "bg-cover bg-center bg-no-repeat",
78        "m-0 mt-0 mb-0 min-h-14",
79      )}
80    >
81      <AccordionPrimitive.Trigger
82        data-slot="accordion-trigger"
83        className={cn(
84          "group/accordion-trigger relative flex w-full items-center overflow-hidden px-5 py-3 text-center text-sm text-white outline-none transition-all duration-300",
85          "focus-visible:ring-ring/50 focus-visible:ring-2",
86          "disabled:pointer-events-none disabled:opacity-60",
87// … truncated