Packages
moon
2.72.3
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
@doc "Path to the image"
prop(image_url, :string)
@doc "Size of avatar"
prop(size, :string, default: "md", values: ~w(xs sm md lg xl 2xl))
@doc "Capital letters of name"
prop(name, :string)
@doc "Tailwind classes for customization"
prop(class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Id of the component"
prop(id, :string)
@doc "Content of Avatar - use it to show icons or anything else"
slot(default)
@doc "Status indicator of Avatar, see Avatar.Status"
slot(status)
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"
],
@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