1mod theme;
2
3use crate::{mount_style, theme::use_theme, utils::maybe_rw_signal::MaybeRwSignal, Theme};
4use leptos::*;
5pub use theme::SwitchTheme;
6
7#[component]
8pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal<bool>) -> impl IntoView {
9 mount_style("switch", include_str!("./switch.css"));
10 let theme = use_theme(Theme::light);
11 let css_vars = create_memo(move |_| {
12 let mut css_vars = String::new();
13 theme.with(|theme| {
14 css_vars.push_str(&format!(
15 "--melt-background-color: {};",
16 theme.switch.background_color
17 ));
18 css_vars.push_str(&format!(
19 "--melt-background-color-active: {};",
20 theme.common.color_primary
21 ));
22 });
23 css_vars
24 });
25 view! {
26 <div
27 class="melt-switch"
28 class=("melt-switch--active", move || value.get())
29 style=move || css_vars.get()
30 on:click=move |_| value.set(!value.get_untracked())
31 >
32 <div class="melt-switch__button"></div>
33 </div>
34 }
35}