Packages
moon
2.74.0
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/themes_select.ex
defmodule MoonWeb.Components.ThemesSelect do
@moduledoc false
use MoonWeb, :stateless_component
alias Moon.Design.Popover
alias Moon.Design.Button.IconButton
alias Moon.Design.MenuItem
alias Moon.Design.Switch
alias Moon.Icons.{TextLeftAlign, TextRightAlign, OtherMoon, OtherSun}
prop(theme_name, :string)
prop(direction, :string, values!: ["ltr", "rtl"])
prop(trigger_class, :css_class)
prop(on_bg_color, :css_class)
def render(assigns) do
~F"""
<div>
<Popover
id="settings-popover"
class="fixed bottom-4 lg:bottom-20 ltr:right-4 rtl:left-4 lg:z-50 z-[9999]"
>
<Popover.Trigger>
<IconButton
icon="media_tuner"
class={merge(["shadow-moon-md rounded-full", @trigger_class])}
aria_label="Toggle site settings"
/>
</Popover.Trigger>
<Popover.Panel position="top-end" class="flex flex-col gap-1 p-3 bg-goku">
<MenuItem as="div" class="cursor-default">
{(String.contains?(@theme_name, "-dark") && "Dark mode") || "Light mode"}
<Switch
{=@on_bg_color}
size="xs"
checked={String.contains?(@theme_name, "-dark")}
on_change={"toggle_dark_mode", target: :live_view}
>
<:on_icon><OtherMoon /></:on_icon>
<:off_icon><OtherSun /></:off_icon>
</Switch>
</MenuItem>
<MenuItem as="div" class="cursor-default">
{String.upcase(@direction)} mode
<Switch
size="xs"
checked={@direction == "rtl"}
on_change={"toggle_direction", target: :live_view}
{=@on_bg_color}
>
<:on_icon><TextRightAlign /></:on_icon>
<:off_icon><TextLeftAlign /></:off_icon>
</Switch>
</MenuItem>
</Popover.Panel>
</Popover>
</div>
"""
end
end