Packages
moon
2.79.12
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/avatar.ex
defmodule Moon.Design.Avatar do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Icon
use Moon.Design.Avatar.Properties
def style(assigns) do
"background-image: url(#{assigns.image_url});"
end
def render(assigns) do
~F"""
<div
{=@id}
class={[
merge([
[
"overflow-hidden uppercase font-medium flex items-center justify-center relative text-bulma bg-goku",
set_border_radius(@size),
"text-moon-10-caption h-6 w-6": @size == "xs",
"text-moon-12 h-8 w-8": @size == "sm",
"text-moon-14 h-10 w-10": @size == "md",
"text-moon-16 h-12 w-12": @size == "lg",
"text-moon-16 h-14 w-14": @size == "xl",
"text-moon-20 h-16 w-16": @size == "2xl"
],
get_config(:default_class),
@class
]),
"bg-cover"
]}
style={style(assigns)}
data-testid={@testid}
>
{#if slot_assigned?(:default)}
<#slot />
{#else}
<span :if={@name && !@image_url}>{@name}</span>
<Icon name="generic_user" class={set_icon_size(@size)} :if={!@name && !@image_url} />
{/if}
<#slot
{@status}
context_put={
size: @size
}
/>
</div>
"""
end
defp set_icon_size(size) do
cond do
size == "xs" -> "text-moon-16"
size == "2xl" -> "text-moon-32"
true -> "text-moon-24"
end
end
defp set_border_radius(size) do
cond do
size == "xs" ->
"rounded-moon-i-xs"
size == "2xl" ->
"rounded-moon-i-md"
true ->
"rounded-moon-i-sm"
end
end
end