SaladUI – اجرای مولفه آواتار برای Phoenix LiveView

<.avatar>
  <.avatar_image src="./my-profile-img.jpg">.avatar_image>
  <.avatar_fallback class="bg-primary text-white">CN.avatar_fallback>
<.avatar>

 class="relative rounded-full overflow-hidden w-10 h-10">
     class="aspect-square w-full h-full" src="https://github.com/shadcn.png">
     class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN

 class="relative rounded-full overflow-hidden w-10 h-10">
     class="aspect-square w-full h-full" src="badimage.png" onerror="this.style.display='none'">
     class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN

 class="relative rounded-full overflow-hidden w-10 h-10">
     class="aspect-square w-full h-full" src="https://github.com/shadcn.png" onerror="this.style.display='none'" phx-update="ignore">
     class="flex rounded-full bg-primary text-white items-center justify-center w-full h-full">CN

defmodule SaladUI.Avatar do
  @moduledoc false
  use Phoenix.Component

  attr(:class, :string, default: nil)
  attr(:rest, :global)

  def avatar(assigns) do
    ~H"""
    relative h-10 w-10 overflow-hidden rounded-full", @class])} {@rest}>
      <%= render_slot(@inner_block) %>
    
    """
  end

  attr(:class, :string, default: nil)
  attr(:rest, :global)

  def avatar_image(assigns) do
    ~H"""
    aspect-square h-full w-full", @class])}
      {@rest}
      phx-update="ignore"
      style="display:none"
      onload="this.style.display=''"
    />
    """
  end

  attr(:class, :string, default: nil)
  attr(:rest, :global)
  slot(:inner_block, required: false)

  def avatar_fallback(assigns) do
    ~H"""
    flex h-full w-full items-center justify-center rounded-full bg-muted", @class])
      }
      {@rest}
    >
      <%= render_slot(@inner_block) %>
    
    """
  end
end

style="display:none"
onload="this.style.display=''"