🎨 Isolate infra and ui components

The src/base.rs is still to be reworked.

src/ui/components/button.rs

@@ -0,0 +1,117 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+turf::style_sheet!("src/ui/components/button.scss");
+
+#[derive(PartialEq, Clone, Props)]
+struct _ButtonProps {
+    children: Element,
+    #[props(default = false)]
+    focus: bool,
+    id: Option<String>,
+    onclick: Option<EventHandler<MouseEvent>>,
+    style: String,
+}
+
+macro_rules! svg_text_icon {
+    ($name:ident,$text:literal) => {
+        #[derive(Copy, Clone, PartialEq)]
+        struct $name;
+        impl IconShape for $name {
+            fn view_box(&self) -> String {
+                String::from("0 0 250 50")
+            }
+
+            fn xmlns(&self) -> String {
+                String::from("http://www.w3.org/2000/svg")
+            }
+
+            fn child_elements(&self) -> Element {
+                rsx! {
+                    text {
+                        x: "50%",
+                        y: "50%",
+                        $text
+                    }
+                }
+            }
+        }
+    };
+}
+
+macro_rules! svg_text_button {
+    ($name:ident,$style:ident,$icon:ident) => {
+        pub fn $name(props: ButtonProps) -> Element {
+            rsx! {
+                style { {STYLE_SHEET} },
+
+                Button {
+                    id: props.id,
+
+                    style: {ClassName::$style},
+
+                    onclick: move |event| {
+                        if let Some(cb) = &props.onclick {
+                            cb.call(event);
+                        }
+                    },
+
+                    focus: props.focus,
+
+                    Icon {
+                        icon: $icon,
+                    }
+                }
+            }
+        }
+    };
+}
+
+#[derive(PartialEq, Clone, Props)]
+pub struct ButtonProps {
+    #[props(default = false)]
+    focus: bool,
+    id: Option<String>,
+    onclick: Option<EventHandler<MouseEvent>>,
+    style: Option<String>,
+    children: Element,
+}
+
+fn Button(props: ButtonProps) -> Element {
+    rsx! {
+        style { {STYLE_SHEET} },
+
+        button {
+            id: props.id,
+
+            class: props.style,
+
+            onmounted: move |evt| async move {
+                _ = evt.set_focus(props.focus).await;
+            },
+
+            onclick: move |evt| {
+                if let Some(cb) = &props.onclick {
+                    cb.call(evt);
+                }
+            },
+
+            {props.children},
+        },
+    }
+}
+
+svg_text_icon!(RegisterText, "REGISTER");
+svg_text_button!(RegisterButton, REGISTER_BUTTON, RegisterText);
+
+svg_text_icon!(LoginText, "LOGIN");
+svg_text_button!(LoginButton, LOGIN_BUTTON, LoginText);
+
+svg_text_icon!(SuccessText, "OK");
+svg_text_button!(SuccessButton, SUCCESS_BUTTON, SuccessText);
+
+svg_text_icon!(WarningText, "WARNING");
+svg_text_button!(WarningButton, WARNING_BUTTON, WarningText);
+
+svg_text_icon!(ErrorText, "ERROR");
+svg_text_button!(ErrorButton, ERROR_BUTTON, ErrorText);