Packages
moon
2.87.7
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/example_and_code.ex
defmodule MoonWeb.Components.ExampleAndCode do
@moduledoc false
use Moon.StatefulComponent
alias Moon.Design.Tag
alias Moon.Design.Tabs
alias Moon.Icons.ControlsEye
alias Moon.Icons.SoftwareCode
prop(class, :string)
prop(example_class, :css_class)
prop(title, :string, default: "")
prop(layout, :string, default: "grid")
slot(example)
slot(code)
slot(state)
slot(note)
def render(assigns) do
~F"""
<section class={"flex flex-col", @class}>
<div class="flex flex-row items-center justify-between">
<div class="flex flex-row gap-2 w-full">
<Tabs id={"#{@id}-example-and-code"} class="justify-between gap-6">
<h2 class="text-moon-24 font-semibold order-1">{@title}</h2>
<p :if={slot_assigned?(:note)} class="text-moon-16 w-full order-3 empty:hidden"><#slot {@note} /></p>
<Tabs.List class="w-fit p-1 gap-1 bg-gohan rounded-moon-s-md order-2">
<Tabs.Segment class="flex flex-row gap-2">
<ControlsEye class="text-moon-24" />
<span class="hidden md:block">Preview</span>
</Tabs.Segment>
<Tabs.Segment class="flex flex-row gap-2">
<SoftwareCode class="text-moon-24" />
<span class="hidden md:block">Code</span>
</Tabs.Segment>
</Tabs.List>
<Tabs.Panels class="order-4 focus:outline-none">
<Tabs.Panel>
<div class={merge([
"p-4 flex bg-gohan text-moon-14 rounded-moon-s-sm w-full",
@example_class
])}>
<!-- Do not remove this -->
<div class="flex flex-wrap items-center justify-around gap-2 w-full bg-transparent">
<#slot {@example}>Example not defined</#slot>
</div>
</div>
</Tabs.Panel>
<Tabs.Panel>
<div class="overflow-scroll">
<pre class="theme-moon-dark w-full bg-gohan overflow-scroll p-4 text-moon-14 text-bulma rounded-moon-s-sm"><#slot {@code}>Example code not defined</#slot></pre>
</div>
</Tabs.Panel>
</Tabs.Panels>
</Tabs>
</div>
</div>
<div
class="theme-moon-dark grid gap-4 p-4 bg-gohan text-moon-14 rounded-moon-s-sm"
:if={slot_assigned?(:state)}
>
<div><Tag class="text-goten bg-piccolo w-fit">State</Tag></div>
<pre class="break-all overflow-x-scroll text-bulma"><#slot {@state} /></pre>
</div>
</section>
"""
end
end