Packages
moon
2.78.2
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/components/avatar/avatar.ex
defmodule Moon.Components.Avatar do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Icon
alias Moon.Components.Avatar.StatusOrigin
prop(image_url, :string)
prop(name, :string)
prop(color, :css_class, default: "text-bulma")
prop(bg_color, :css_class, default: "bg-goku")
prop(is_uppercase, :boolean, default: true)
prop(size, :string, default: "md", values: ~w(xs sm md lg xl 2xl))
prop(class, :css_class)
prop(is_status_active, :boolean, default: false)
prop(status_origin, :struct, default: %StatusOrigin{vertical: "bottom", horizontal: "right"})
prop(is_rounded, :boolean, default: false)
def style(assigns) do
"background-image: url(#{assigns.image_url});"
end
def render(assigns) do
~F"""
<div
class={
"bg-cover justify-center flex font-semibold items-center overflow-hidden relative",
@bg_color,
@color,
set_border_radius(@size, @is_rounded),
@class,
uppercase: @is_uppercase,
"text-moon-12 h-6 w-6": @size == "xs",
"text-moon-14 h-8 w-8": @size == "sm",
"text-moon-16 h-10 w-10": @size == "md",
"text-moon-18 h-12 w-12": @size == "lg",
"text-moon-20 h-14 w-14": @size == "xl",
"text-moon-24 h-16 w-16": @size == "2xl"
}
style={style(assigns)}
data-size={@size}
>
<span :if={@name && !@image_url}>{@name}</span>
<Icon name="generic_user" class={set_icon_dimensions(@size)} :if={!@name && !@image_url} />
<div
:if={@status_origin && @is_status_active}
class={
"absolute border-solid color-beerus rounded-full bg-roshi",
"top-0": @status_origin.vertical == "top",
"bottom-0": @status_origin.vertical == "bottom",
"left-0": @status_origin.horizontal == "left",
"right-0": @status_origin.horizontal == "right",
"w-2 h-2 border": @size == "xs",
"w-3 h-3 border-2": @size == "sm" || @size == "md",
"w-4 h-4 border-2": @size == "lg" || @size == "xl" || @size == "2xl"
}
/>
</div>
"""
end
defp set_icon_dimensions(size) do
cond do
size == "xs" -> "w-4 h-4"
size == "2xl" -> "w-8 h-8"
true -> "w-6 h-6"
end
end
defp set_border_radius(size, is_rounded) do
cond do
is_rounded ->
"rounded-full"
size == "xs" ->
"rounded-moon-i-xs"
size == "2xl" ->
"rounded-moon-i-md"
true ->
"rounded-moon-i-sm"
end
end
end