summary refs log tree commit diff stats
path: root/src/components/checkbox_placeholder.rs
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/checkbox_placeholder.rs')
-rw-r--r--src/components/checkbox_placeholder.rs54
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/checkbox_placeholder.rs b/src/components/checkbox_placeholder.rs
new file mode 100644
index 0000000..a1aaa0c
--- /dev/null
+++ b/src/components/checkbox_placeholder.rs
@@ -0,0 +1,54 @@
+use leptos::{
+    IntoView, component,
+    html::Input,
+    prelude::{ClassAttribute, ElementChild, GlobalAttributes, NodeRef, NodeRefAttribute},
+    view,
+};
+
+use crate::components::get_id;
+
+#[component]
+pub fn CheckboxPlaceholder(
+    label: &'static str,
+    node_ref: NodeRef<Input>,
+) -> impl IntoView {
+    let id = get_id();
+
+    view! {
+        <div class="relative h-14">
+            <input
+                id=id.to_string()
+                type="checkbox"
+                autocomplete="off"
+                class="\
+                absolute \
+                bottom-0 \
+                right-5 \
+                bg-gray-200 \
+                border-8 \
+                border-b-2 \
+                border-b-trasparent \
+                border-gray-200 \
+                focus:outline-none \
+                h-10 \
+                rounded-t-lg \
+                text-gray-900 \
+                "
+                node_ref=node_ref
+            />
+
+            <label
+                for=id.to_string()
+                class="\
+                bottom-10 \
+                absolute \
+                left-0 \
+                text-gray-700 \
+                text-sm \
+                "
+            >
+                {label}
+            </label>
+        </div>
+    }
+}