avatar.tsx raw

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