8-bit Avatar

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