Function Avatar

web/components/ui/avatar.tsx:58–80

({ className, size, src, alt, name, ...props }: AvatarProps)

}

function Avatar({ className, size, src, alt, name, ...props }: AvatarProps) {
  const [imgError, setImgError] = React.useState(false)
  const showImage = src && !imgError
  const initials = name ? getInitials(name) : '?'
  const colorClass = name ? getAvatarColor(name) : 'bg-surface-700 text-surface-300'

  return (
    <span className={cn(avatarVariants({ size, className }))} {...props}>
      {showImage ? (
        <img
          src={src}
          alt={alt ?? name ?? 'Avatar'}
          className="h-full w-full object-cover"
          onError={() => setImgError(true)}
        />
      ) : (
        <span className={cn('flex h-full w-full items-center justify-center', colorClass)} aria-label={name}>
          {initials}
        </span>
      )}
    </span>
  )
}

export { Avatar, avatarVariants }