feat: add switch component

src/lib.rs

@@ -23,6 +23,7 @@ mod progress;
 mod select;
 mod slider;
 mod space;
+mod switch;
 mod table;
 mod tabs;
 mod teleport;
@@ -53,6 +54,7 @@ pub use progress::*;
 pub use select::*;
 pub use slider::*;
 pub use space::*;
+pub use switch::*;
 pub use table::*;
 pub use tabs::*;
 pub use theme::Theme;

src/switch/mod.rs

@@ -0,0 +1,28 @@
+use crate::{mount_style, theme::use_theme, utils::maybe_rw_signal::MaybeRwSignal, Theme};
+use leptos::*;
+
+#[component]
+pub fn Switch(#[prop(optional, into)] value: MaybeRwSignal<bool>) -> impl IntoView {
+    mount_style("switch", include_str!("./switch.css"));
+    let theme = use_theme(Theme::light);
+    let css_vars = create_memo(move |_| {
+        let mut css_vars = String::new();
+        theme.with(|theme| {
+            css_vars.push_str(&format!(
+                "--background-color: {};",
+                theme.common.color_primary.clone()
+            ));
+        });
+        css_vars
+    });
+    view! {
+        <div
+            class="melt-switch"
+            class=("melt-switch--active", move || value.get())
+            style=move || css_vars.get()
+            on:click=move |_| value.set(!value.get_untracked())
+        >
+            <div class="melt-switch__button"></div>
+        </div>
+    }
+}

src/switch/switch.css

@@ -0,0 +1,32 @@
+.melt-switch {
+    position: relative;
+    display: inline-block;
+    width: 35px;
+    height: 19px;
+    padding: 2px 5px 3px;
+    background-color: #f6f6f6;
+    border-radius: 25px;
+    cursor: pointer;
+    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
+}
+
+.melt-switch__button {
+    position: absolute;
+    left: 4px;
+    display: inline-block;
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+    background-color: #fff;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3),
+        inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
+    transition: all 0.4s ease;
+}
+
+.melt-switch--active {
+    background-color: var(--background-color);
+}
+
+.melt-switch--active .melt-switch__button {
+    left: 22px;
+}