From fb8e654ad224b5192929da09f6a7eea2a2e510c9 Mon Sep 17 00:00:00 2001
From: Larissa <hello@hawruka.de>
Date: Wed, 25 Dec 2024 17:58:05 -0600
Subject: [PATCH] feat: snow toggle button

---
 public/local_storage.js | 11 --------
 public/snow.js          |  7 +++++
 public/utils.js         | 29 +++++++++++++++++++++
 src/components/mod.rs   |  2 +-
 src/components/snow.rs  | 58 +++++++++++++++++++++++++++++++++++++++++
 src/icons/cloud.rs      | 47 +++++++++++++++++++++++++++++++++
 src/icons/mod.rs        |  2 +-
 src/main.rs             |  8 ++----
 src/utils.rs            |  2 +-
 9 files changed, 146 insertions(+), 20 deletions(-)
 delete mode 100644 public/local_storage.js
 create mode 100644 public/utils.js
 create mode 100644 src/components/snow.rs
 create mode 100644 src/icons/cloud.rs

diff --git a/public/local_storage.js b/public/local_storage.js
deleted file mode 100644
index b7e21cb..0000000
--- a/public/local_storage.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export function setItem(key, value) {
-  localStorage.setItem(key, value);
-}
-
-export function getItem(key) {
-  return localStorage.getItem(key);
-}
-
-export function removeItem(key) {
-  localStorage.removeItem(key);
-}
diff --git a/public/snow.js b/public/snow.js
index 625d74f..d92e5a3 100644
--- a/public/snow.js
+++ b/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, {
diff --git a/public/utils.js b/public/utils.js
new file mode 100644
index 0000000..c6e5098
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index f3eab3a..aac08b8 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,3 +1,3 @@
 use crate::utils::import;
 
-import!(showcase, skill, project, theme);
+import!(showcase, skill, snow, project, theme);
diff --git a/src/components/snow.rs b/src/components/snow.rs
new file mode 100644
index 0000000..cf03a55
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/src/icons/cloud.rs b/src/icons/cloud.rs
new file mode 100644
index 0000000..e7ee022
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/src/icons/mod.rs b/src/icons/mod.rs
index 11ab23b..5073327 100644
--- a/src/icons/mod.rs
+++ b/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
 );
diff --git a/src/main.rs b/src/main.rs
index b6e37dc..b2bd265 100644
--- a/src/main.rs
+++ b/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>
diff --git a/src/utils.rs b/src/utils.rs
index 8b9cfa0..1f4ea6d 100644
--- a/src/utils.rs
+++ b/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;