Messenger/web/src/components/Avatar.tsx

import { avatarColor, initials } from '../lib/format'
import { IconUsers } from './icons'

type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'

interface AvatarProps {
  name: string
  seed: number | string
  size?: AvatarSize
  online?: boolean
  className?: string
}

const SIZE_CLASSES: Record<AvatarSize, string> = {
  sm: 'h-8 w-8 text-[11px]',
  md: 'h-10 w-10 text-xs',
  lg: 'h-12 w-12 text-sm',
  xl: 'h-16 w-16 text-lg',
}

export default function Avatar({ name, seed, size = 'md', online = false, className = '' }: AvatarProps) {
  const background = avatarColor(seed)
  return (
    <span className={`relative inline-flex shrink-0 ${className}`}>
      <span
        className={`inline-flex items-center justify-center rounded-full font-semibold text-white/95 shadow-inner ring-1 ring-white/10 ${SIZE_CLASSES[size]}`}
        style={{ backgroundImage: `linear-gradient(145deg, ${background}, color-mix(in srgb, ${background} 62%, #000))` }}
        aria-hidden="true"
      >
        {initials({ display_name: name, username: name })}
      </span>
      {online && (
        <span
          className="absolute -right-0.5 -bottom-0.5 rounded-full border-2 border-panel bg-online"
          style={{ width: '30%', height: '30%', minWidth: 9, minHeight: 9 }}
          aria-hidden="true"
        />
      )}
    </span>
  )
}

interface GroupAvatarProps {
  name: string
  seed: number | string
  size?: AvatarSize
  className?: string
}

export function GroupAvatar({ name, seed, size = 'md', className = '' }: GroupAvatarProps) {
  const background = avatarColor(seed)
  return (
    <span className={`relative inline-flex shrink-0 ${className}`}>
      <span
        className={`inline-flex items-center justify-center rounded-full text-white/95 shadow-inner ring-1 ring-white/10 ${SIZE_CLASSES[size]}`}
        style={{ backgroundImage: `linear-gradient(145deg, ${background}, color-mix(in srgb, ${background} 62%, #000))` }}
        aria-hidden="true"
        title={name}
      >
        <IconUsers className="h-[55%] w-[55%]" />
      </span>
    </span>
  )
}