🎉 First commit (💩)

2023-08-03 20:44:53 +02:00
commit 54a50c1ff0
28 changed files with 1077 additions and 0 deletions
--- a/src/components/avatar_selector.rs
+++ b/src/components/avatar_selector.rs
@@ -0,0 +1,77 @@
+use dioxus::prelude::*;
+use sir::css;
+
+pub fn AvatarSelector(cx: Scope) -> Element {
+    let selector = css!(
+        "
+	    position: relative;
+	    //left: 35%;
+	    height: 100%;
+	    aspect-ratio: 1;
+        "
+    );
+
+    let picture = css!(
+        "
+        position: absolute;
+	    height: 75%;
+	    aspect-ratio: 1;
+
+	    bottom: 17.5%;
+	    right: 18%;
+        "
+    );
+
+    cx.render(rsx! {
+        div {
+            class: "{selector}",
+            svg {
+                view_box: "0 0 100 100",
+                linearGradient {
+                    id: "avatar-gradient",
+                    x1: 1,
+                    y1: 1,
+                    x2: 0,
+                    y2: 0,
+                    stop {
+                        offset: "0%",
+                        stop_color: "rgb(138, 191, 209)",
+                    }
+                    stop {
+                        offset: "60%",
+                        stop_color: "rgb(236, 246, 249)",
+                    }
+                },
+                filter {
+                    id: "avatar-shadow",
+                    feDropShadow {
+                        dx: 2,
+                        dy: 2,
+                        std_deviation: 3,
+                        flood_opacity: 0.5,
+                    },
+                },
+                rect {
+                    width: "90",
+                    height: "90",
+                    rx: "12",
+                    fill: "url('#avatar-gradient')",
+                    filter: "url('#avatar-shadow')",
+                    stroke: "grey",
+                },
+                // rect {
+                //     x: "7.5",
+                //     y: "7.5",
+                //     width: "75",
+                //     height: "75",
+                //     fill: "transparent",
+                //     stroke: "grey",
+                // },
+            },
+            img {
+                class: "{picture}",
+                src: "./images/default-avatar.png",
+            },
+        },
+    })
+}