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