@if (avatarUrl()) {
  <img
    [ngSrc]="avatarUrl()!"
    [width]="sizePx()"
    [height]="sizePx()"
    alt=""
    class="rounded-full object-cover"
    [class]="sizeClasses() + ' ' + ringClass()"
  />
} @else {
  <div
    class="rounded-full bg-primary/20 flex items-center justify-center text-primary font-medium"
    [class]="sizeClasses() + ' ' + textClass() + ' ' + ringClass()"
  >
    {{ initial() }}
  </div>
}