Warcraft Skeleton

1import { cva, type VariantProps } from "class-variance-authority";
2import type * as React from "react";
3 
4import { cn } from "@/lib/utils";
5 
6import "@/components/ui/warcraftcn/styles/warcraft.css";
7 
8const skeletonVariants = cva(
9  "fantasy relative overflow-hidden",
10  {
11    variants: {
12      variant: {
13        default: "rounded-md",
14        circular: "rounded-full",
15      },
16      faction: {
17        default: "wc-skeleton",
18        orc: "wc-skeleton-orc",
19        elf: "wc-skeleton-elf",
20        human: "wc-skeleton-human",
21        undead: "wc-skeleton-undead",
22      },
23    },
24    defaultVariants: {
25      variant: "default",
26      faction: "default",
27    },
28  }
29);
30 
31function Skeleton({
32  className,
33  variant,
34  faction,
35  ...props
36}: React.ComponentProps<"div"> & VariantProps<typeof skeletonVariants>) {
37  return (
38    <div
39      className={cn(skeletonVariants({ variant, faction }), className)}
40      data-slot="skeleton"
41      {...props}
42    >
43      {/* Faction icon overlay with pulse animation */}
44      <div className="wc-skeleton-icons" aria-hidden="true" />
45      {/* Shimmer effect overlay */}
46      <div className="wc-skeleton-shimmer" aria-hidden="true" />
47    </div>
48  );
49}
50 
51export { Skeleton, skeletonVariants };