Warcraft Avatar

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4 
5import "@/components/ui/warcraftcn/styles/warcraft.css";
6 
7const avatarVariants = cva("fantasy relative", {
8  variants: {
9    faction: {
10      default: "wc-avatar-default",
11      orc: "wc-avatar-orc",
12      elf: "wc-avatar-elf",
13      human: "wc-avatar-human",
14      undead: "wc-avatar-undead",
15    },
16    size: {
17      sm: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 lg:w-32 lg:h-32 xl:w-36 xl:h-36",
18      md: "w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 lg:w-48 lg:h-48 xl:w-56 xl:h-56",
19      lg: "w-40 h-40 sm:w-56 sm:h-56 md:w-72 md:h-72 lg:w-96 lg:h-96 xl:w-[30rem] xl:h-[30rem]",
20    },
21  },
22  defaultVariants: {
23    faction: "default",
24    size: "md",
25  },
26});
27 
28export interface AvatarProps
29  extends Omit<React.ComponentProps<"div">, "children">,
30    VariantProps<typeof avatarVariants> {
31  src?: string; // Avatar image URL
32  alt?: string; // Alt text
33  fallback?: React.ReactNode; // Fallback if no image
34  faction?: "default" | "orc" | "elf" | "human" | "undead";
35  size?: "sm" | "md" | "lg";
36}
37 
38export const Avatar: React.FC<AvatarProps> = ({
39  className,
40  src,
41  alt = "",
42  fallback,
43  faction = "default",
44  size = "md",
45  ...props
46}) => {
47  const frameClasses = avatarVariants({ faction, size });
48 
49  return (
50    <div className={cn(frameClasses, className)} {...props}>
51      <div className="absolute inset-[20%] overflow-hidden">
52        {src ? (
53          <img
54            src={src}
55            alt={alt}
56            className="w-full h-full object-cover mt-0 mb-0"
57            draggable={false}
58          />
59        ) : fallback ? (
60          <div className="flex items-center justify-center w-full h-full text-2xl select-none">
61            {fallback}
62          </div>
63        ) : null}
64      </div>
65 
66      <div className="pointer-events-none absolute inset-0 scale-[1.05] wc-avatar-frame" />
67    </div>
68  );
69};
70 
71export { avatarVariants };