Warcraft Button

1import { Slot } from "@radix-ui/react-slot";
2import { cva, type VariantProps } from "class-variance-authority";
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7import "@/components/ui/warcraftcn/styles/warcraft.css";
8 
9const buttonVariants = cva(
10  "fantasy inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 active:scale-95 active:brightness-75 active:shadow-inner",
11  {
12    variants: {
13      variant: {
14        default:
15          "bg-center px-5 py-4 bg-cover bg-no-repeat text-white hover:brightness-110",
16        frame:
17          "bg-center bg-cover bg-no-repeat text-white hover:brightness-110",
18      },
19    },
20    defaultVariants: {
21      variant: "default",
22    },
23  }
24);
25 
26function Button({
27  className,
28  variant,
29  asChild = false,
30  style,
31  ...props
32}: React.ComponentProps<"button"> &
33  VariantProps<typeof buttonVariants> & {
34    asChild?: boolean;
35  }) {
36  const Comp = asChild ? Slot : "button";
37  const borderImageClass =
38    variant === "frame" ? "wc-btn-border-frame" : "wc-btn-border";
39 
40  return (
41    <Comp
42      className={cn(
43        buttonVariants({ variant }),
44        "border-solid [border-image-repeat:stretch] border-5 [border-image-slice:16_fill]",
45        borderImageClass,
46        className
47      )}
48      style={style}
49      data-slot="button"
50      {...props}
51    />
52  );
53}
54 
55export { Button, buttonVariants };