✨ Add TextField component

src/_base.scss

@@ -51,13 +51,16 @@ $color-ternary-70: #8B0046;
 $color-ternary-60: #720033;
 $color-ternary-50: #5A0022;
 
+$color-critical: #C91B13;
+$color-warning: #FFA316;
+$color-success: #4AAB79;
+
 $border-default-color: $greyscale-90;
 $border-big-width: 4px;
 $border-big: solid $border-big-width $border-default-color;
 $border-normal-width: 2px;
 $border-normal: solid $border-normal-width $border-default-color;
 
-
 $form-max-height: 1024px;
 $form-aspect-ratio: 1/1.618;
 

src/components/mod.rs

@@ -8,4 +8,5 @@ pub mod loading;
 pub mod login;
 pub mod main_window;
 pub mod spinner;
+pub mod text_field;
 pub mod wallpaper;

src/components/text_field.rs

@@ -0,0 +1,45 @@
+use dioxus::prelude::*;
+
+turf::style_sheet!("src/components/text_field.scss");
+
+#[derive(Props)]
+pub struct TextFieldProps<'a> {
+    id: Option<&'a str>,
+    oninput: Option<EventHandler<'a, Event<FormData>>>,
+    placeholder: Option<&'a str>,
+    r#type: Option<&'a str>,
+    value: Option<&'a str>,
+    #[props(default = true)]
+    is_value_valid: bool,
+}
+
+pub fn TextField<'a>(cx: Scope<'a, TextFieldProps<'a>>) -> Element<'a> {
+    let classes = [
+        ClassName::ROOT,
+        if !cx.props.is_value_valid {
+            ClassName::INVALID_DATA
+        } else {
+            ""
+        },
+    ]
+    .join(" ");
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        input {
+            class: "{classes}",
+
+            id: cx.props.id.unwrap_or(""),
+
+            oninput: move |evt| {
+                if let Some(cb) = &cx.props.oninput {
+                    cb.call(evt);
+                }
+            },
+            r#type: cx.props.r#type,
+            placeholder: cx.props.placeholder,
+            value: cx.props.value,
+        }
+    })
+}

src/components/text_field.scss

@@ -0,0 +1,25 @@
+@import "../_base.scss"
+
+.root {
+    $horizontal-padding: 1vw;
+
+    padding-left: $horizontal-padding;
+    padding-right: $horizontal-padding;
+    padding-top: 0px;
+    padding-bottom: 0px;
+
+    height: calc(100% - (2 * ($border-normal-width)));
+    width: calc(100% - (2 * ($border-normal-width + $horizontal-padding)));
+
+    margin: 0;
+
+    border: $border-normal;
+    border-color: $color-primary-90;
+    border-radius: $border-radius;
+
+    font-size: 2vh;
+
+    &.invalid-data {
+        border-color: $color-critical;
+    }
+}