From f52733d9a63d21c2091ce0b3b2ec6dc50f3f7c32 Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sat, 9 Mar 2024 22:46:00 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Add=20buttons=20which=20will=20b?=
 =?UTF-8?q?e=20used=20by=20the=20Login=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button.rs   | 148 +++++++++++++++++++++++++++++++++++++
 src/components/button.scss |  44 +++++++++++
 src/components/mod.rs      |   1 +
 3 files changed, 193 insertions(+)
 create mode 100644 src/components/button.rs
 create mode 100644 src/components/button.scss

diff --git a/src/components/button.rs b/src/components/button.rs
new file mode 100644
index 0000000..caa6f8a
--- /dev/null
+++ b/src/components/button.rs
@@ -0,0 +1,148 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::{Icon, IconShape};
+
+turf::style_sheet!("src/components/button.scss");
+
+#[derive(Props)]
+struct _ButtonProps<'a> {
+    children: Element<'a>,
+    #[props(default = false)]
+    focus: bool,
+    #[props(optional)]
+    id: Option<&'a str>,
+    #[props(optional)]
+    onclick: Option<EventHandler<'a, MouseEvent>>,
+    style: &'static str,
+}
+
+fn Button<'a>(cx: Scope<'a, _ButtonProps<'a>>) -> Element<'a> {
+    let focus = cx.props.focus;
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        button {
+            id: cx.props.id,
+
+            class: cx.props.style,
+
+            onmounted: move |cx| async move {
+                let _ = cx.inner().set_focus(focus).await;
+            },
+
+            onclick: move |evt| {
+                if let Some(cb) = &cx.props.onclick {
+                    cb.call(evt);
+                }
+            },
+
+            &cx.props.children
+        }
+    })
+}
+
+#[derive(Copy, Clone, Debug)]
+struct RegisterText;
+impl IconShape for RegisterText {
+    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) -> LazyNodes {
+        rsx! {
+            text {
+                x: "50%",
+                y: "50%",
+                "dominant-baseline": "middle",
+                "text-anchor": "middle",
+                "font-size": "50",
+                style: "fill: #ffffff",
+                "Register"
+            }
+        }
+    }
+}
+
+#[derive(Props)]
+pub struct ButtonProps<'a> {
+    #[props(default = false)]
+    focus: bool,
+    #[props(optional)]
+    id: Option<&'a str>,
+    #[props(optional)]
+    onclick: Option<EventHandler<'a, MouseEvent>>,
+}
+
+pub fn RegisterButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        Button {
+            id: cx.props.id.unwrap_or(""),
+
+            style: ClassName::REGISTER,
+
+            onclick: |event| {
+                if let Some(cb) = &cx.props.onclick {
+                    cb.call(event);
+                }
+            },
+
+            focus: cx.props.focus,
+
+            Icon {
+                icon: RegisterText,
+            }
+        }
+    })
+}
+
+#[derive(Copy, Clone, Debug)]
+struct LoginText;
+impl IconShape for LoginText {
+    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) -> LazyNodes {
+        rsx! {
+            text {
+                x: "50%",
+                y: "50%",
+                "dominant-baseline": "middle",
+                "text-anchor": "middle",
+                "font-size": "50",
+                style: "fill: #ffffff",
+                "Login"
+            }
+        }
+    }
+}
+
+pub fn LoginButton<'a>(cx: Scope<'a, ButtonProps>) -> Element<'a> {
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        Button {
+            id: cx.props.id.unwrap_or(""),
+
+            style: ClassName::LOGIN,
+
+            onclick: |event| {
+                if let Some(cb) = &cx.props.onclick {
+                    cb.call(event);
+                }
+            },
+
+            focus: cx.props.focus,
+
+            Icon {
+                icon: LoginText,
+            }
+        }
+    })
+}
diff --git a/src/components/button.scss b/src/components/button.scss
new file mode 100644
index 0000000..c2ac1d4
--- /dev/null
+++ b/src/components/button.scss
@@ -0,0 +1,44 @@
+@import "../_base.scss"
+
+.root {
+    height: 100%;
+    aspect-ratio: 3.5;
+
+    border: $border-big;
+    border-radius: $border-radius;
+
+    color: $greyscale-0;
+
+    font-family: "Geist";
+    font-weight: bold;
+
+    svg {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+.register {
+    @extend .root;
+
+    background-color: $color-ternary-90;
+}
+.register:hover {
+    background-color: $color-ternary-80;
+}
+.register:active {
+    background-color: $color-ternary-70;
+}
+
+
+.login {
+    @extend .root;
+
+    background-color: $color-secondary-90;
+}
+.login:hover {
+    background-color: $color-secondary-80;
+}
+.login:active {
+    background-color: $color-secondary-70;
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 2a4230e..857ab74 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1,4 +1,5 @@
 pub mod avatar_selector;
+pub mod button;
 pub mod chats_window;
 pub mod contacts_window;
 pub mod header;