AfiS-Aktensystem/web/components/Avatar.tsx

/**
 * Profilbild einer Person.
 *
 * Die Quelle ist Discord: dort liegt das Bild ohnehin, die Anmeldung läuft
 * über dieselbe Stelle, und ein eigener Zwischenspeicher wäre ein Dienst mehr
 * im Stack für ein Bild von 64 Pixeln. Dafür steht `cdn.discordapp.com` in der
 * Inhaltsrichtlinie, siehe middleware.ts.
 *
 * Ohne Bild - und das ist der Normalfall bei Konten ohne eigenes Profilbild -
 * stehen die Anfangsbuchstaben da. Kein Platzhaltergesicht: ein leerer Kreis
 * mit Initialen ist ehrlicher und lädt nichts nach.
 */
export function Avatar({
  userId,
  avatarHash,
  displayName,
  size = 28,
}: {
  userId: string
  avatarHash: string | null
  displayName: string
  size?: number
}) {
  const kanten = { width: size, height: size, fontSize: Math.round(size * 0.4) }

  if (!avatarHash) {
    return (
      <span aria-hidden className="avatar" style={kanten}>
        {initialen(displayName)}
      </span>
    )
  }

  return (
    // eslint-disable-next-line @next/next/no-img-element -- fremde Quelle, kein Layout-Nutzen durch next/image
    <img
      src={`https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.png?size=64`}
      alt=""
      width={size}
      height={size}
      className="avatar"
      style={kanten}
    />
  )
}

function initialen(name: string): string {
  const teile = name.trim().split(/\s+/).filter(Boolean)
  if (teile.length === 0) return '?'
  if (teile.length === 1) return teile[0]!.slice(0, 2).toUpperCase()
  return (teile[0]![0]! + teile[teile.length - 1]![0]!).toUpperCase()
}