Packages
moon
2.79.12
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/show_room_page/wizard/sidebar_options.ex
defmodule MoonWeb.Components.ShowRoomPage.Wizard.SidebarOptions do
@moduledoc false
use MoonWeb, :stateless_component
alias Moon.Design.Form.Radio
alias MoonWeb.Components.ShowRoomPage.Wizard.Card
alias Moon.Design.Switch
alias Moon.Icons.{OtherMoon, OtherSun}
alias Moon.Parts.Button
prop(value, :string)
prop(on_change, :event)
prop(light_sidebar, :string)
prop(toggle_sidebar_theme, :event)
def render(assigns) do
~F"""
<Card>
<:title>Select the preferable sidebar type</:title>
<:description>Tailor your app with Moon's dynamic sidebar options. Choose the layout to suit your preferences and needs.</:description>
<div class="grid grid-cols-1 divide-y">
<div class="grid grid-cols-1 md:grid-cols-2 pb-3">
<span class="font-medium">Customize sidebar type</span>
<Radio {=@value} {=@on_change}>
<Radio.Button value="slim">
<Radio.Indicator class="moon-checked:border-roshi after:bg-roshi" />Slim sidebar
<Button.Success
as="a"
size="xs"
:if={@value == "slim"}
href="https://github.com/coingaming/moon/blob/main/lib/moon_web/components/show_room_page/sidebar/slim.ex"
target="_blank"
>see code</Button.Success>
</Radio.Button>
<Radio.Button value="generic">
<Radio.Indicator class="moon-checked:border-roshi after:bg-roshi" />Generic sidebar
<Button.Success
as="a"
size="xs"
:if={@value == "generic"}
href="https://github.com/coingaming/moon/blob/main/lib/moon_web/components/show_room_page/sidebar/generic.ex"
target="_blank"
>see code</Button.Success>
</Radio.Button>
<Radio.Button value="wide">
<Radio.Indicator class="moon-checked:border-roshi after:bg-roshi" />Wide sidebar
<Button.Success
as="a"
size="xs"
:if={@value == "wide"}
href="https://github.com/coingaming/moon/blob/main/lib/moon_web/components/show_room_page/sidebar/wide.ex"
target="_blank"
>see code</Button.Success>
</Radio.Button>
</Radio>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 pt-3">
<span class="font-medium">Customize theme</span>
<div class="flex gap-4">
<Switch
checked={!@light_sidebar}
on_change={@toggle_sidebar_theme}
on_bg_color="bg-roshi"
size="xs"
>
<:on_icon><OtherMoon /></:on_icon>
<:off_icon><OtherSun /></:off_icon>
</Switch>
<span>{(@light_sidebar && "Light theme sidebar") || "Dark theme sidebar"}</span>
</div>
</div>
</div>
</Card>
"""
end
end