Packages
moon
2.87.1
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_web/components/component_page_description.ex
defmodule MoonWeb.Components.ComponentPageDescription do
@moduledoc false
use MoonWeb, :stateless_component
alias MoonWeb.Components.Badges
prop(title, :string)
prop(image, :string)
prop(is_deprecated, :boolean, default: false)
prop(is_in_progress, :boolean, default: false)
prop(is_aria_support, :boolean, default: false)
prop(is_rtl_support, :boolean, default: false)
slot(default)
def render(assigns) do
~F"""
<div class="flex flex-col gap-4 lg:flex-row" ">
<div class="flex flex-col gap-12 lg:basis-1/2">
<div class="flex flex-col gap-2">
<h1 class="text-moon-32 font-medium">{@title}</h1>
<div
class="flex items-start gap-2"
:if={@is_deprecated || @is_in_progress || @is_aria_support || @is_rtl_support}
>
<Badges.Deprecated :if={@is_deprecated} />
<Badges.InProgress :if={@is_in_progress} />
<Badges.AriaSupport :if={@is_aria_support} />
<Badges.RTLSupport :if={@is_rtl_support} />
</div>
</div>
<div class="flex flex-col items-start gap-2 text-moon-16">
<#slot />
</div>
</div>
<div :if={@image} class="flex flex-col gap-12 lg:basis-1/2">
<img src={"/moon/assets/images/#{@image}"} alt={@title}>
</div>
</div>
"""
end
end