Renders an avatar component.

The avatar component can have medium and large sizes, and it defaults to medium. It accepts a slot for text. Always provide a source and alt. The width and height have 32px default values and can be overidden.

See the bitstyles avatar docs for further info.

Default avatar

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"/>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar">
    <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
  </div>
</div>
"""

With extra class

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placehold.co/100x100" class="foo bar" alt="Username’s avatar"/>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar foo bar">
    <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
  </div>
</div>
"""

Large avatar

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar size="l" src="https://placehold.co/100x100" alt="Username’s avatar" height="46" width="46"/>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar a-avatar--l">
    <img alt="Username’s avatar" height="46" src="https://placehold.co/100x100" width="46"/>
  </div>
</div>
"""

Avatar with a text

iex> assigns = %{}
...> render ~H"""
...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"> Username </.ui_avatar>
...> """
"""
<div class="u-flex u-items-center">
  <div class="a-avatar">
    <img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
  </div>
  <span class="u-margin-s2-left">
    Username
  </span>
</div>
"""