Packages
moon
2.72.4
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/status.ex
defmodule Moon.Design.Avatar.Status do
@moduledoc false
use Moon.StatelessComponent, slot: "status"
@doc "Position for status indicator. Vertical options: bottom | top. Horizontal options: left | right. Default is bottom-right"
prop(position, :map)
@doc "Will be got from Avatar in most cases"
prop(size, :string, from_context: :size)
@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)
def render(assigns) do
default_position = %{vertical: "bottom", horizontal: "right"}
position = Map.merge(default_position, assigns.position || %{})
~F"""
<div
{=@id}
class={[
merge([
[
"absolute border-gohan rounded-full bg-roshi",
"top-0": position.vertical == "top",
"bottom-0": position.vertical == "bottom",
"start-0": position.horizontal == "left",
"end-0": position.horizontal == "right",
"w-2 h-2": @size == "xs",
"w-3 h-3": @size == "sm" || @size == "md",
"w-4 h-4": @size == "lg" || @size == "xl" || @size == "2xl"
],
@class
]),
"border-solid",
border: @size == "xs",
"border-2": @size == "sm" || @size == "md",
"border-2": @size == "lg" || @size == "xl" || @size == "2xl"
]}
data-testid={@testid}
/>
"""
end
end