feat(buy): Add the framework for the /buy page

1 files changed, 38 insertions, 0 deletions

diff --git a/src/components/buy.rs b/src/components/buy.rs
new file mode 100644
index 0000000..86e9952
--- /dev/null
+++ b/src/components/buy.rs
@@ -0,0 +1,38 @@
+use leptos::{
+    IntoView, component,
+    html::Input,
+    prelude::{ClassAttribute, ElementChild, Get, NodeRef, OnAttribute, Set, signal},
+    view,
+    web_sys::SubmitEvent,
+};
+
+use crate::components::{input_placeholder::InputPlaceholder, site_header::SiteHeader};
+
+#[component]
+pub fn Buy() -> impl IntoView {
+    let (product_barcode, set_product_barcode) = signal(String::new());
+
+    let input_element: NodeRef<Input> = NodeRef::new();
+
+    let on_submit = move |ev: SubmitEvent| {
+        // stop the page from reloading!
+        ev.prevent_default();
+
+        let value = input_element
+            .get()
+            // event handlers can only fire after the view
+            // is mounted to the DOM, so the `NodeRef` will be `Some`
+            .expect("<input> to exist")
+            .value();
+        set_product_barcode.set(value);
+    };
+
+    view! {
+        <SiteHeader logo=icondata_io::IoPricetag back_location="/" name="Buy" />
+        <form class="flex flex-col contents-start m-2 g-2" on:submit=on_submit>
+            <InputPlaceholder input_type="number" label="Product Barcode" node_ref=input_element />
+            <input type="submit" value="Submit" />
+        </form>
+        <p>"Name is: " {product_barcode}</p>
+    }
+}