Packages
moon
2.68.10
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/parts/sidebar/avatar.ex
defmodule Moon.Parts.Sidebar.Avatar do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.Avatar
@doc "Capital letters of name"
prop(name, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(status_class, :css_class)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Id of the component"
prop(id, :string)
def render(assigns) do
~F"""
<Avatar
{=@id}
{=@testid}
class={merge(["rounded-full rounded-moon-i-xx text-goku bg-cell overflow-visible", @class])}
size="sm"
{=@name}
>
<Avatar.Status class={merge(["border-goku bg-cell z-10 -bottom-0.5 -end-0.5", @status_class])} />
</Avatar>
"""
end
end