Avatar

User profile images

Preview

U

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.AvatarComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :src, fn -> nil end)
    assigns = assign_new(assigns, :alt, fn -> "User" end)
    assigns = assign_new(assigns, :size, fn -> "md" end)
    assigns = assign_new(assigns, :fallback, fn -> "U" end)

    assigns = assign(assigns, :size_classes, get_size_classes(assigns.size))

    ~H"""
    <div class={@size_classes}>
      <%= if @src do %>
        <img src={@src} alt={@alt} class="w-full h-full rounded-full object-cover" />
      <% else %>
        <div class="w-full h-full rounded-full bg-primary-600 flex items-center justify-center text-white font-medium">
          <%= @fallback %>
        </div>
      <% end %>
    </div>
    """
  end

  defp get_size_classes(size) do
    case size do
      "xs" -> "w-6 h-6"
      "sm" -> "w-8 h-8"
      "md" -> "w-10 h-10"
      "lg" -> "w-12 h-12"
      "xl" -> "w-16 h-16"
      _ -> "w-10 h-10"
    end
  end
end