Pixelact Avatar

1import type React from "react";
2import { forwardRef } from "react";
3import * as AvatarPrimitive from "@radix-ui/react-avatar";
4import { cva } from "class-variance-authority";
5import { cn } from "@/lib/utils";
6import "@/components/ui/pixelact-ui/styles/styles.css";
7 
8const avatarVariants = cva("", {
9  variants: {
10    font: {
11      normal: "",
12      pixel: "pixel-font",
13    },
14    variant: {
15      default: "",
16      square: "shadow-(--pixel-box-shadow) box-shadow-margin",
17      round: "rounded-full",
18    },
19    size: {
20      small: "h-8 w-8",
21      medium: "h-12 w-12",
22      large: "h-16 w-16",
23    },
24  },
25  defaultVariants: {
26    font: "pixel",
27    variant: "square",
28    size: "medium",
29  },
30});
31 
32const Avatar = forwardRef<
33  React.ComponentRef<typeof AvatarPrimitive.Root>,
34  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
35    font?: "normal" | "pixel";
36    variant?: "default" | "round" | "square";
37    size?: "small" | "medium" | "large";
38  }
39>(({ className = "", font, variant, size = "medium", ...props }, ref) => {
40  const isRound = variant === "round";
41 
42  return (
43    <div className={cn("relative size-max", className)}>
44      <div
45        className="absolute inset-0 w-full h-full pointer-events-none"
46        style={{ zIndex: 10 }}
47      >
48        {isRound && (
49          <>
50            {size === "large" && (
51              <>
52                <div
53                  className={
54                    "absolute top-[-1px] left-[19px] right-[19px] h-[5px] bg-foreground dark:bg-ring"
55                  }
56                ></div>
57                <div className="absolute top-[3px] left-[9px] h-[5px] bg-foreground dark:bg-ring w-[10px]"></div>
58                <div className="absolute top-[3px] right-[9px] h-[5px] bg-foreground dark:bg-ring w-[10px]"></div>
59 
60                <div className="absolute top-[8px] left-[5px] h-[5px] bg-foreground dark:bg-ring w-[5px]"></div>
61                <div className="absolute top-[8px] right-[5px] h-[5px] bg-foreground dark:bg-ring w-[5px]"></div>
62 
63                <div className="absolute top-[13px] left-0 h-[38px] bg-foreground dark:bg-ring w-[5px]"></div>
64                <div className="absolute top-[13px] right-0 h-[38px] bg-foreground dark:bg-ring w-[5px]"></div>
65 
66                <div className="absolute bottom-[8px] left-[5px] h-[5px] bg-foreground dark:bg-ring w-[5px]"></div>
67                <div className="absolute bottom-[8px] right-[5px] h-[5px] bg-foreground dark:bg-ring w-[5px]"></div>
68 
69// … truncated