Warcraft Badge

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 badgeVariants = cva(
10  "fantasy inline-flex items-center gap-1.5 transition-all duration-100 focus:outline-none focus:ring-2 focus:ring-amber-500/50 [border-image-repeat:stretch] border-solid",
11  {
12    variants: {
13      variant: {
14        default:
15          "text-amber-100 [text-shadow:0_0_8px_rgba(251,191,36,0.4)] wc-btn-border-frame [border-image-slice:16_fill]",
16        secondary:
17          "text-slate-200 wc-btn-border [border-image-slice:16_fill]",
18        destructive:
19          "text-red-200 [text-shadow:0_0_8px_rgba(239,68,68,0.4)] wc-btn-border-frame brightness-75 hue-rotate-[320deg] [border-image-slice:16_fill]",
20        outline:
21          "border-amber-900/50 bg-black/40 text-amber-200/80 hover:bg-black/60",
22      },
23      size: {
24        default: "px-3 py-1 text-xs border-[3px]",
25        sm: "px-2 py-0.5 text-[10px] border-[2px]",
26        lg: "px-4 py-1.5 text-sm border-[4px]",
27      },
28      faction: {
29        none: "",
30        alliance:
31          "text-blue-100 [text-shadow:0_0_10px_rgba(59,130,246,0.5)] border-blue-900/50 bg-blue-950/40",
32        horde:
33          "text-red-100 [text-shadow:0_0_10px_rgba(239,68,68,0.5)] border-red-900/50 bg-red-950/40",
34      },
35      shape: {
36        default: "rounded-md",
37        shield: "rounded-t-sm rounded-b-xl border-b-[5px]",
38        banner: "rounded-none clip-path-banner",
39      },
40    },
41    defaultVariants: {
42      variant: "default",
43      size: "default",
44      faction: "none",
45      shape: "default",
46    },
47  }
48);
49 
50export interface BadgeProps
51  extends React.HTMLAttributes<HTMLDivElement>,
52    VariantProps<typeof badgeVariants> {
53  asChild?: boolean;
54}
55 
56function Badge({
57  className,
58  variant,
59  size,
60  faction,
61  shape,
62  asChild = false,
63  children,
64  ...props
65}: BadgeProps) {
66  const Comp = asChild ? Slot : "div";
67 
68  return (
69    <Comp
70      className={cn(
71        badgeVariants({ variant, size, faction, shape }),
72        className
73      )}
74      {...props}
75    >
76      {children}
77    </Comp>
78  );
79}
80 
81Badge.displayName = "Badge";
82 
83export { Badge, badgeVariants };