Packages
moon
2.73.0
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/dropdown/footer.ex
defmodule Moon.Design.Dropdown.Footer do
@moduledoc "Optional dropdown header"
use Moon.StatelessComponent, slot: "footer"
alias Moon.Design.Button.IconButton
alias Moon.Design.Button
alias Moon.Icon
@doc "Data-testid attribute for HTML tag"
prop(testid, :string)
@doc "Id attribute for HTML tag"
prop(id, :string)
@doc "Additional Taiilwind classes"
prop(class, :css_class)
@doc "Inner content of the component"
slot(default)
def render(assigns) do
~F"""
<div data-testid={@testid} {=@id} class={merge(["h-14 p-3 bg-heles", @class])}>
<#slot>
<div class="flex flex-row justify-between items-center">
<div class="flex flex-row gap-1 items-center">
<IconButton
size="sm"
class="bg-heles active:transform-none cursor-default"
hover_bg_class="group-hover:bg-transparent"
><Icon name="arrows_up" class="text-bulma moon-text-16" /></IconButton>
<IconButton
size="sm"
class="bg-heles active:transform-none cursor-default"
hover_bg_class="group-hover:bg-transparent"
><Icon name="arrows_down" class="text-bulma moon-text-16" /></IconButton>
<span class="text-trunks text-moon-12 ps-1">to navigate</span>
</div>
<div class="flex flex-row gap-1 items-center">
<IconButton
size="sm"
class="bg-heles active:transform-none cursor-default"
hover_bg_class="group-hover:bg-transparent"
><Icon name="arrows_reply" class="scale-y-[-1] text-bulma moon-text-16" /></IconButton>
<span class="text-trunks text-moon-12 ps-1">to select</span>
</div>
<div class="flex flex-row gap-1 items-center">
<Button
size="sm"
class="w-8 p-1 font-normal text-moon-12 bg-heles text-bulma active:transform-none cursor-default"
hover_bg_class="group-hover:bg-transparent"
>esc</Button>
<span class="text-trunks text-moon-12 ps-1">to close</span>
</div>
</div>
</#slot>
</div>
"""
end
end