Avatar

1"use client";
2 
3import * as AvatarPrimitive from "@radix-ui/react-avatar";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const Avatar = React.forwardRef<
9  React.ComponentRef<typeof AvatarPrimitive.Root>,
10  React.ComponentProps<typeof AvatarPrimitive.Root>
11>(function Avatar({ className, ...props }, ref) {
12  return (
13    <AvatarPrimitive.Root
14      className={cn(
15        "relative flex size-8 shrink-0 touch-manipulation overflow-hidden rounded-full focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
16        className
17      )}
18      data-slot="avatar"
19      ref={ref}
20      {...props}
21    />
22  );
23});
24 
25const AvatarImage = React.forwardRef<
26  React.ComponentRef<typeof AvatarPrimitive.Image>,
27  React.ComponentProps<typeof AvatarPrimitive.Image>
28>(function AvatarImage(
29  { className, loading, decoding, draggable, ...props },
30  ref
31) {
32  return (
33    <AvatarPrimitive.Image
34      alt={(props as any).alt ?? ""}
35      className={cn("aspect-square size-full", className)}
36      data-slot="avatar-image"
37      decoding={decoding ?? "async"}
38      draggable={draggable ?? false}
39      loading={loading ?? "lazy"}
40      ref={ref}
41      {...props}
42    />
43  );
44});
45 
46const AvatarFallback = React.forwardRef<
47  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
48  React.ComponentProps<typeof AvatarPrimitive.Fallback>
49>(function AvatarFallback({ className, ...props }, ref) {
50  return (
51    <AvatarPrimitive.Fallback
52      className={cn(
53        "flex size-full items-center justify-center rounded-full bg-muted",
54        className
55      )}
56      data-slot="avatar-fallback"
57      ref={ref}
58      {...props}
59    />
60  );
61});
62 
63export { Avatar, AvatarImage, AvatarFallback };