1
interface AvatarProps {
2
  name: string;
3
  avatarUrl: string | null | undefined;
4
  className?: string;
5
}
6
 
7
export function Avatar({ name, avatarUrl, className }: AvatarProps) {
8
  const initial = name.trim().charAt(0).toUpperCase() || "?";
9
  return (
10
    <span
11
      className={`inline-grid shrink-0 place-items-center overflow-hidden rounded-full bg-zinc-800 font-medium text-zinc-300 ${className ?? ""}`}
12
    >
13
      {avatarUrl ? <img src={avatarUrl} alt={name} className="h-full w-full object-cover" /> : initial}
14
    </span>
15
  );
16
}