Warcraft Tooltip

1"use client";
2 
3import * as React from "react";
4import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5import { cva, type VariantProps } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9import "@/components/ui/warcraftcn/styles/warcraft.css";
10 
11type TooltipVariant = "default" | "uncommon" | "rare" | "epic" | "legendary";
12 
13const TooltipVariantContext = React.createContext<TooltipVariant>("default");
14 
15const tooltipContentVariants = cva(
16  "fantasy z-50 w-fit max-w-xs rounded px-4 py-3 text-sm text-amber-100 wc-tooltip-base",
17  {
18    variants: {
19      variant: {
20        default: "wc-tooltip",
21        uncommon: "wc-tooltip-uncommon",
22        rare: "wc-tooltip-rare",
23        epic: "wc-tooltip-epic",
24        legendary: "wc-tooltip-legendary",
25      },
26    },
27    defaultVariants: {
28      variant: "default",
29    },
30  }
31);
32 
33const TOOLTIP_TITLE_COLORS: Record<TooltipVariant, string> = {
34  default: "text-amber-400",
35  uncommon: "text-green-400",
36  rare: "text-blue-400",
37  epic: "text-purple-400",
38  legendary: "text-orange-400",
39};
40 
41function TooltipProvider({
42  delayDuration = 0,
43  ...props
44}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
45  return (
46    <TooltipPrimitive.Provider
47      data-slot="tooltip-provider"
48      delayDuration={delayDuration}
49      {...props}
50    />
51  );
52}
53 
54function Tooltip({
55  ...props
56}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
57  return (
58    <TooltipProvider>
59      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
60    </TooltipProvider>
61  );
62}
63 
64function TooltipTrigger({
65  ...props
66}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
67  return (
68    <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
69  );
70}
71 
72function TooltipContent({
73  className,
74  variant = "default",
75  sideOffset = 8,
76  children,
77  ...props
78}: React.ComponentProps<typeof TooltipPrimitive.Content> &
79  VariantProps<typeof tooltipContentVariants>) {
80  return (
81    <TooltipPrimitive.Portal>
82      <TooltipPrimitive.Content
83        data-slot="tooltip-content"
84        sideOffset={sideOffset}
85        className={cn(
86          tooltipContentVariants({ variant }),
87          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
88          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
89          className
90        )}
91// … truncated