Packages
moon
2.78.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/banner.ex
defmodule MoonComponents.Banner.Container do
@moduledoc false
use Moon.StatelessComponent
prop(is_mobile, :boolean, default: false)
prop(has_buttons, :boolean, default: false)
slot(default)
def render(assigns) do
~F"""
<div class={
"w-full bg-goten rounded-moon-s-sm",
get_container_padding(@is_mobile),
get_container_display(@has_buttons, @is_mobile)
}>
<#slot />
</div>
"""
end
defp get_container_padding(is_mobile) do
if is_mobile do
"p-4"
else
"p-6"
end
end
defp get_container_display(has_buttons, is_mobile) do
if has_buttons && !is_mobile do
"flex flex-row justify-between"
else
"block"
end
end
end
defmodule MoonComponents.Banner.Body do
@moduledoc false
use Moon.StatelessComponent
prop(is_multiline, :boolean, default: true)
slot(default)
def render(assigns) do
~F"""
<div class={"items-center", get_body_classes(@is_multiline)}>
<#slot />
</div>
"""
end
defp get_body_classes(is_multiline) do
if is_multiline do
"grid grid-rows-[1fr_1fr]"
else
"flex gap-2"
end
end
end
defmodule MoonComponents.Banner.BodyContent do
@moduledoc false
use Moon.StatelessComponent
prop(is_multiline, :boolean, default: true)
slot(default)
def render(assigns) do
~F"""
<div class={"content-center align-middle", get_body_content_classes(@is_multiline)}>
<#slot />
</div>
"""
end
defp get_body_content_classes(is_multiline) do
if is_multiline do
"block"
else
"flex"
end
end
end
defmodule MoonComponents.Banner.BodyButtonContainer do
@moduledoc false
use Moon.StatelessComponent
slot(default)
def render(assigns) do
~F"""
<div class="flex gap-2 items-center justify-end">
<#slot />
</div>
"""
end
end
defmodule Moon.Components.Banner do
@moduledoc false
use Moon.StatelessComponent
alias MoonComponents.Banner.Container
alias MoonComponents.Banner.Body
alias MoonComponents.Banner.BodyContent
alias MoonComponents.Banner.BodyButtonContainer
prop(description, :string, required: true)
prop(title, :string)
prop(is_multiline, :boolean, default: true)
prop(is_mobile, :boolean, default: false)
slot(icon_header_slot)
slot(buttons_slot)
slot(link_slot)
def render(assigns) do
~F"""
<Container is_mobile={@is_mobile} has_buttons={slot_assigned?(:buttons_slot)}>
<Body :if={!@is_multiline} is_multiline={@is_multiline}>
<BodyContent is_multiline={@is_multiline}>{@description}</BodyContent>
<BodyButtonContainer><#slot {@link_slot} /></BodyButtonContainer>
</Body>
<Body :if={@is_multiline} is_multiline={@is_multiline}>
<div class="grid justify-end grid-cols-[4fr_1fr]">
<div class="font-semibold">{@title}</div>
<div :if={slot_assigned?(:icon_header_slot)} class="flex cursor-pointer justify-end">
<#slot {@icon_header_slot} />
</div>
</div>
<BodyContent is_multiline={@is_multiline}>{@description}</BodyContent>
</Body>
<BodyButtonContainer>
<#slot {@buttons_slot} />
</BodyButtonContainer>
</Container>
"""
end
end