Packages
moon
2.87.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/components/list_items/single_line_item.ex
# TODO convert this to the new MenuItem component https://www.figma.com/file/S3q1SkVngbwHuwpxHKCsgtJj/Moon---Components?node-id=344%3A306
defmodule Moon.Components.ListItems.SingleLineItem do
@moduledoc false
use Moon.StatelessComponent
prop(size, :string, values: ~w(md lg xl), default: "md")
prop(background_color, :string, values: Moon.colors(), default: "bg-goku")
prop(active_background_color, :string, values: Moon.colors(), default: "bg-gohan")
prop(current, :boolean, default: false)
prop(left_grow, :boolean, default: false)
prop(right_grow, :boolean, default: false)
slot(default)
slot(left_icon)
slot(right_icon)
def render(assigns) do
~F"""
<div class={
"relative rounded-moon-i-md text-moon-14 text-bulma leading-6 cursor-pointer flex",
@background_color,
"hover:#{@active_background_color}",
"gap-2 p-2": @size == "md",
"gap-4 px-4 py-3": @size == "lg",
"gap-4 p-4": @size == "xl",
"#{@active_background_color}": @current
}>
<div class={"flex items-center", grow: @left_grow} :if={slot_assigned?(:left_icon)}>
<#slot {@left_icon} />
</div>
<div class="grow">
<#slot />
</div>
<div class={"flex items-center", grow: @right_grow} :if={slot_assigned?(:right_icon)}>
<#slot {@right_icon} />
</div>
</div>
"""
end
end