Packages
moon
2.73.6
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/header.ex
defmodule Moon.Parts.Header do
@moduledoc false
use Moon.StatelessComponent
@doc "Id for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Title slot"
slot(title, required: true)
@doc "Descrption slot"
slot(description)
@doc "Breadcrumbs slot"
slot(breadcrumbs)
@doc "ButtonGroup slot"
slot(button_group)
@doc "Left button slot for mobile view"
slot(left_button)
@doc "Right button slot for mobile view"
slot(right_button)
def render(assigns) do
~F"""
<header
{=@id}
data-testid={@testid}
class={merge(["w-full fixed top-0 bg-goku z-50 theme-moon-dark", @class])}
>
<div class="w-full p-4 lg:p-8 flex flex-row justify-between">
{#if slot_assigned?(:description)}
<div class="flex flex-col">
<div class={
"lg:mb-6": slot_assigned?(:breadcrumbs) || slot_assigned?(:title),
"lg:mb-0 mb-6": slot_assigned?(:left_button) && !slot_assigned?(:breadcrumbs),
"lg:mb-0 mb-6": slot_assigned?(:title) && !slot_assigned?(:breadcrumbs),
"mb-6": slot_assigned?(:title) && slot_assigned?(:description),
"mb-[4.5rem]": slot_assigned?(:right_button) && !slot_assigned?(:left_button)
}>
<#slot {@breadcrumbs} />
<#slot {@left_button} />
</div>
<div class="flex flex-col">
<#slot {@title} />
<#slot {@description} />
</div>
</div>
<div class="mb-6">
<#slot {@button_group} />
<#slot {@right_button} />
</div>
{#else}
<div class="flex flex-row lg:flex-col flex-row justify-between lg:w-fit w-full items-center lg:items-start">
<div class={
"lg:mb-6": slot_assigned?(:breadcrumbs),
"mb-0": slot_assigned?(:title) && !slot_assigned?(:breadcrumbs)
}>
<#slot {@breadcrumbs} />
<#slot {@left_button} />
</div>
<#slot
{@title}
context_put={
header_class: "text-moon-24 lg:text-moon-32",
title_only: slot_assigned?(:title) && !slot_assigned?(:description)
}
/>
<div>
<#slot {@right_button} />
</div>
</div>
<#slot {@button_group} />
{/if}
</div>
</header>
"""
end
end