avatar

1"use client"
2
3import * as React from "react"
4import { cn } from "@/lib/utils"
5
6const AvatarContext = React.createContext<{
7    status: "loading" | "loaded" | "error"
8    setStatus: (status: "loading" | "loaded" | "error") => void
9} | null>(null)
10
11const Avatar = React.forwardRef<
12    HTMLDivElement,
13    React.HTMLAttributes<HTMLDivElement>
14>(({ className, ...props }, ref) => {
15    const [status, setStatus] = React.useState<"loading" | "loaded" | "error">("loading")
16
17    return (
18        <AvatarContext.Provider value={{ status, setStatus }}>
19            <div
20                ref={ref}
21                className={cn(
22                    "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border-2 border-black bg-white",
23                    className
24                )}
25                {...props}
26            />
27        </AvatarContext.Provider>
28    )
29})
30Avatar.displayName = "Avatar"
31
32const AvatarImage = React.forwardRef<
33    HTMLImageElement,
34    React.ImgHTMLAttributes<HTMLImageElement>
35>(({ className, src, ...props }, ref) => {
36    const context = React.useContext(AvatarContext)
37    const { setStatus, status } = context || {}
38
39    React.useEffect(() => {
40        if (!src) {
41            setStatus?.("error")
42            return
43        }
44
45        const img = new Image()
46        img.src = src as string
47        img.onload = () => setStatus?.("loaded")
48        img.onerror = () => setStatus?.("error")
49
50        return () => {
51            img.onload = null
52            img.onerror = null
53        }
54    }, [src, setStatus])
55
56    if (status === "error" && context) return null
57
58    return (
59        // eslint-disable-next-line @next/next/no-img-element
60        <img
61            ref={ref}
62            src={src}
63            alt={props.alt || "Avatar"}
64            className={cn("aspect-square h-full w-full object-cover", className)}
65            {...props}
66        />
67    )
68})
69AvatarImage.displayName = "AvatarImage"
70
71const AvatarFallback = React.forwardRef<
72    HTMLDivElement,
73    React.HTMLAttributes<HTMLDivElement>
74>(({ className, ...props }, ref) => {
75    const context = React.useContext(AvatarContext)
76    const status = context?.status
77
78    if (status === "loaded") return null
79
80    return (
81        <div
82            ref={ref}
83            className={cn(
84                "flex h-full w-full items-center justify-center rounded-full bg-main text-sm font-bold text-black",
85// … truncated