feat: snow toggle button

public/snow.js

@@ -1,7 +1,14 @@
+window.snowEnabled = false;
+
 window.onload = function createSnowEffect() {
+  window.snowEnabled = true;
   const indexLayout = document.querySelector("body");
 
   function createSnowflake() {
+    if (!window.snowEnabled) {
+      return 0;
+    }
+
     const snowflake = document.createElement("div");
     snowflake.textContent = "❄";
     Object.assign(snowflake.style, {

public/utils.js

@@ -0,0 +1,29 @@
+export function setItem(key, value) {
+  localStorage.setItem(key, value);
+}
+
+export function getItem(key) {
+  return localStorage.getItem(key);
+}
+
+export function removeItem(key) {
+  localStorage.removeItem(key);
+}
+
+/* Snow */
+export function setSnowStatus(value) {
+  if (!document.readyState == "complete") {
+    return;
+  }
+  if (!typeof value == "boolean") {
+    return new Error("value must be of type 'boolean'");
+  }
+
+  window.snowEnabled = value;
+  return window.snowEnabled;
+}
+
+export function getSnowStatus() {
+  console.log(window.snowEnabled);
+  return window.snowEnabled;
+}

src/components/mod.rs

@@ -1,3 +1,3 @@
 use crate::utils::import;
 
-import!(showcase, skill, project, theme);
+import!(showcase, skill, snow, project, theme);

src/components/snow.rs

@@ -0,0 +1,58 @@
+use crate::icons::{Cloud, CloudSnow};
+use crate::utils::{getItem, setItem};
+use leptos::wasm_bindgen;
+use leptos::wasm_bindgen::prelude::*;
+use leptos::{component, create_effect, create_signal, view, IntoView};
+
+#[wasm_bindgen(module = "/public/utils.js")]
+extern "C" {
+    pub fn getSnowStatus() -> JsValue;
+    pub fn setSnowStatus(value: bool) -> JsValue;
+}
+
+#[wasm_bindgen]
+pub fn load_pref() -> bool {
+    let snow_enabled = {
+        let value = getItem("snow");
+        if value.is_null() || value.is_undefined() {
+            setItem("snow", "true");
+            "true".to_string()
+        } else {
+            value.as_string().unwrap_or_default()
+        }
+    };
+
+    if snow_enabled != "true" {
+        setSnowStatus(false);
+    }
+
+    return snow_enabled == "true";
+}
+
+#[component]
+pub fn SnowToggle() -> impl IntoView {
+    let (enabled, set_enabled) = create_signal(true);
+
+    let icon = move || {
+        if enabled() {
+            view! { <CloudSnow /> }
+        } else {
+            view! { <Cloud /> }
+        }
+    };
+
+    create_effect(move |_| {
+        let s = load_pref();
+        set_enabled(s);
+    });
+
+    view! {
+        <button on:click=move|_| {
+            let status = setSnowStatus(!getSnowStatus().as_bool().unwrap()).as_bool().expect(".");
+            set_enabled(status);
+            setItem("snow", format!("{}", status).as_str());
+        }>
+            {icon}
+        </button>
+    }
+}

src/icons/cloud.rs

@@ -0,0 +1,47 @@
+use leptos::{component, view, IntoView};
+
+#[component]
+pub fn Cloud() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-cloud"
+        >
+            <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
+        </svg>
+    }
+}
+
+#[component]
+pub fn CloudSnow() -> impl IntoView {
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-cloud-snow"
+        >
+            <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+            <path d="M8 15h.01" />
+            <path d="M8 19h.01" />
+            <path d="M12 17h.01" />
+            <path d="M12 21h.01" />
+            <path d="M16 15h.01" />
+            <path d="M16 19h.01" />
+        </svg>
+    }
+}

src/icons/mod.rs

@@ -2,5 +2,5 @@ use crate::utils::import;
 
 import!(
     twitter, ts, sun, sqlite, react, rust, paypal, python, node, next, newspaper, dotnet, mysql,
-    moon, code, csharp, discord, flask, github, home, instagram, js, mail, telegram, astro
+    moon, code, csharp, discord, flask, github, home, instagram, js, mail, telegram, astro, cloud
 );

src/main.rs

@@ -27,17 +27,13 @@ fn App() -> impl IntoView {
                         <icons::Code />
                     </a>
                     <components::ThemeButton />
+                    <components::SnowToggle />
                 </div>
             </section>
             <section class="info">
                 <div class="aboutMe">
                     <span class="avatar">
-                        <img
-                            alt="avatar"
-                            src={AVATAR}
-                            width="80"
-                            height="80"
-                        />
+                        <img alt="avatar" src=AVATAR width="80" height="80" />
                         <div class="details">
                             <h1>Larissa</h1>
                             <p>17yo backend dev</p>

src/utils.rs

@@ -1,7 +1,7 @@
 use leptos::wasm_bindgen;
 use leptos::wasm_bindgen::prelude::*;
 
-#[wasm_bindgen(module = "/public/local_storage.js")]
+#[wasm_bindgen(module = "/public/utils.js")]
 extern "C" {
     pub fn setItem(key: &str, value: &str) -> JsValue;
     pub fn getItem(key: &str) -> JsValue;