From cfbc84343bfa6044c88b1e89101e642b4217b9fa Mon Sep 17 00:00:00 2001
From: Ethan Girouard <ethan@girouard.com>
Date: Wed, 12 Feb 2025 18:57:52 -0500
Subject: [PATCH] Add FancyInput component for forms

---
 src/components/fancy_input.rs | 34 ++++++++++++++++++++++++++++++++++
 src/components/mod.rs         |  1 +
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/fancy_input.rs

diff --git a/src/components/fancy_input.rs b/src/components/fancy_input.rs
new file mode 100644
index 0000000..d003384
--- /dev/null
+++ b/src/components/fancy_input.rs
@@ -0,0 +1,34 @@
+use leptos::prelude::*;
+use leptos::text_prop::TextProp;
+
+#[component]
+pub fn FancyInput(
+    #[prop(into)] label: TextProp,
+    #[prop(optional, into)] password: Signal<bool>,
+    #[prop(optional)] required: bool,
+    #[prop(optional)] value: RwSignal<String>,
+) -> impl IntoView {
+    view! {
+        <div class="relative mt-12 mb-3">
+            <input
+                class="peer text-lg w-full relative p-1 z-20 border-none outline-none bg-transparent text-white"
+                type={move || if password.get() { "password" } else { "text" }}
+                required={required}
+                placeholder=""
+                bind:value={value}
+            />
+            <span
+                class="absolute left-0 text-lg transition-all duration-500
+                    text-lg peer-[:not(:placeholder-shown)]:text-base peer-focus:text-base
+                    text-black peer-[:not(:placeholder-shown)]:text-neutral-700 peer-focus:text-neutral-700;
+                    peer-[:not(:placeholder-shown)]:translate-y-[-30px] peer-focus:translate-y-[-30px]" 
+            >
+                {label.get()}
+            </span>
+            <div
+                class="w-full h-[2px] rounded-md bg-accent-light absolute bottom-0 left-0
+                    transition-all duration-500 peer-[:not(:placeholder-shown)]:h-10 peer-focus:h-10"
+            ></div>
+        </div>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 66a4ac1..b754047 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -14,3 +14,4 @@ pub mod queue;
 pub mod playbar;
 pub mod song;
 pub mod error_template;
+pub mod fancy_input;