1 files changed, 77 insertions, 0 deletions
diff --git a/src/components/input_placeholder.rs b/src/components/input_placeholder.rs
new file mode 100644
index 0000000..92f9926
--- /dev/null
+++ b/src/components/input_placeholder.rs
@@ -0,0 +1,77 @@
+use leptos::{
+    IntoView, component,
+    html::Input,
+    prelude::{ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute},
+    view,
+};
+use uuid::Uuid;
+
+#[component]
+pub fn InputPlaceholder(
+    input_type: &'static str,
+    label: &'static str,
+    node_ref: NodeRef<Input>,
+    #[prop(default = None)] initial_value: Option<String>,
+) -> impl IntoView {
+    let id = Uuid::new_v4();
+
+    view! {
+        <div class="relative h-14">
+            <input
+                id=id.to_string()
+                type=input_type
+                class="\
+                absolute \
+                bottom-0 \
+                bg-gray-200 \
+                border-8 \
+                border-b-2 \
+                border-b-trasparent \
+                border-gray-200 \
+                focus:outline-none \
+                h-10 \
+                peer \
+                placeholder-transparent \
+                rounded-t-lg \
+                text-gray-900 \
+                w-full \
+                "
+                placeholder="sentinel value"
+                node_ref=node_ref
+                value=initial_value
+            />
+
+            // TODO: Reference `var(--tw-border-2)` instead of the `2 px` <2025-10-01>
+            <div class="
+            absolute \
+            bottom-0 \
+            h-[2px] \
+            w-full \
+            bg-gray-300 \
+            peer-focus:bg-indigo-600 \
+            " />
+
+            <label
+                for=id.to_string()
+                class="\
+                bottom-10 \
+                absolute \
+                left-0 \
+                text-gray-700 \
+                text-sm \
+                transition-all \
+                peer-focus:bottom-10 \
+                peer-focus:left-0 \
+                peer-focus:text-gray-700 \
+                peer-focus:text-sm \
+                peer-placeholder-shown:text-base \
+                peer-placeholder-shown:text-gray-400 \
+                peer-placeholder-shown:bottom-2 \
+                peer-placeholder-shown:left-2 \
+                "
+            >
+                {label}
+            </label>
+        </div>
+    }
+}