avatar

1"use client"
2 
3import * as React from "react"
4import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 
6import { cn } from "@/lib/utils"
7 
8const Avatar = React.forwardRef<
9  React.ElementRef<typeof AvatarPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11>(({ className, ...props }, ref) => (
12  <AvatarPrimitive.Root
13    ref={ref}
14    className={cn(
15      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16      className
17    )}
18    {...props}
19  />
20))
21Avatar.displayName = AvatarPrimitive.Root.displayName
22 
23const AvatarImage = React.forwardRef<
24  React.ElementRef<typeof AvatarPrimitive.Image>,
25  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26>(({ className, ...props }, ref) => (
27  <AvatarPrimitive.Image
28    ref={ref}
29    className={cn("aspect-square h-full w-full", className)}
30    {...props}
31  />
32))
33AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 
35const AvatarFallback = React.forwardRef<
36  React.ElementRef<typeof AvatarPrimitive.Fallback>,
37  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38>(({ className, ...props }, ref) => (
39  <AvatarPrimitive.Fallback
40    ref={ref}
41    className={cn(
42      "flex h-full w-full items-center justify-center rounded-full bg-muted",
43      className
44    )}
45    {...props}
46  />
47))
48AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 
50export { Avatar, AvatarImage, AvatarFallback }