Cinder UI

  <.avatar src="example.png" alt="Levi" fallback="LV" />

  <.avatar alt="Mira Chen" />

  <div class="flex items-center gap-3">
  <.avatar size={:sm} alt="Small User" />
  <.avatar alt="Default User" />
  <.avatar size={:lg} alt="Large User" />
</div>

  <.avatar src="example.png" alt="Online User">
  <:badge class="bg-green-600 dark:bg-green-800"><span class="sr-only">Online</span></:badge>
</.avatar>

  <.avatar class="grayscale" src="example.png" alt="Add User">
  <:badge><.icon name="plus" class="size-2" /></:badge>
</.avatar>

  <.dropdown_menu id="avatar-dropdown">
  <:trigger>
    <.avatar src="example.png" alt="Levi" />
  </:trigger>
  <:item>Profile</:item>
  <:item>Billing</:item>
  <:item>Settings</:item>
  <:item>Log out</:item>
</.dropdown_menu>