frontend: + InputValue component

frontend/src/components/input_value.rs

@@ -0,0 +1,29 @@
+use yew::Properties;
+use yew::prelude::*;
+
+#[derive(PartialEq, Properties)]
+pub struct InputValueProps {
+    pub id: AttrValue,
+    #[prop_or("text".into())]
+    pub _type: AttrValue,
+    pub label: AttrValue,
+    #[prop_or("".into())]
+    pub placeholder: AttrValue,
+    #[prop_or(false)]
+    pub required: bool,
+    pub oninput: Option<Callback<InputEvent>>,
+    #[prop_or("block mb-2 text-sm font-medium text-gray-900 dark:text-white".into())]
+    pub label_class: AttrValue,
+    #[prop_or("bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white".into())]
+    pub input_class: AttrValue,
+}
+
+#[function_component(InputValue)]
+pub fn input_value(props: &InputValueProps) -> Html {
+    html! {
+        <div>
+            <label class={&props.label_class} for={&props.id}>{&props.label}</label>
+            <input type={&props._type} id={&props.id} placeholder={&props.placeholder} class={&props.input_class} required={props.required} oninput={props.oninput.clone()} />
+        </div>
+    }
+}

frontend/src/components/mod.rs

@@ -1,4 +1,5 @@
 pub mod alerts;
+pub mod input_value;
 pub mod navbar;
 pub mod pages;
 pub mod refresh_button;