🎨 Isolate infra and ui components

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

src/ui/components/icons.rs

@@ -0,0 +1,133 @@
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::md_navigation_icons::MdArrowDropDown;
+use dioxus_free_icons::{Icon, IconShape};
+
+turf::style_sheet!("src/ui/components/icons.scss");
+
+include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
+
+use style::{COLOR_PRIMARY_100, COLOR_TERNARY_100};
+
+pub fn DownArrowIcon() -> Element {
+    rsx! {
+        style { {STYLE_SHEET} },
+
+        Icon {
+            class: ClassName::DOWN_ARROW_ICON,
+            icon: MdArrowDropDown,
+        }
+    }
+}
+
+const _PYRAMID_OFFSET_X: f64 = 1.0;
+const _PYRAMID_OFFSET_Y: f64 = 2.0;
+const _PYRAMID_STROKE_WIDTH: f64 = 2.0;
+
+const _PYRAMID_DIST_FROM_CENTRAL_X: f64 = 65.0;
+const _PYRAMID_DIST_FROM_CENTRAL_E1_Y: f64 = 83.0;
+
+const _PYRAMID_EDGES_E1_X: f64 = _PYRAMID_DIST_FROM_CENTRAL_X + _PYRAMID_OFFSET_X;
+const _PYRAMID_EDGES_E1_Y: f64 = _PYRAMID_OFFSET_Y;
+
+const _PYRAMID_LEFT_EDGE_E2_X: f64 = _PYRAMID_OFFSET_X;
+const _PYRAMID_LEFT_EDGE_E2_Y: f64 = _PYRAMID_DIST_FROM_CENTRAL_E1_Y + _PYRAMID_OFFSET_Y;
+
+const _PYRAMID_CENTRAL_EDGE_E2_X: f64 = _PYRAMID_DIST_FROM_CENTRAL_X + _PYRAMID_OFFSET_X;
+const _PYRAMID_CENTRAL_EDGE_E2_Y: f64 = 100.0 + _PYRAMID_OFFSET_Y;
+const _PYRAMID_CENTRAL_EDGE_Y_LEN: f64 = _PYRAMID_CENTRAL_EDGE_E2_Y - _PYRAMID_EDGES_E1_Y;
+
+const _PYRAMID_RIGHT_EDGE_E2_X: f64 = 130.0 + _PYRAMID_OFFSET_X;
+const _PYRAMID_RIGHT_EDGE_E2_Y: f64 = _PYRAMID_LEFT_EDGE_E2_Y;
+
+#[derive(PartialEq, Clone)]
+struct PyramidShape {
+    color: String,
+    ratio: f64,
+    progress_color: String,
+}
+
+impl IconShape for PyramidShape {
+    fn view_box(&self) -> String {
+        let height = _PYRAMID_CENTRAL_EDGE_E2_Y + _PYRAMID_STROKE_WIDTH;
+        let width = _PYRAMID_RIGHT_EDGE_E2_X + _PYRAMID_STROKE_WIDTH;
+        format!("0 0 {width} {height}")
+    }
+
+    fn xmlns(&self) -> String {
+        String::from("http://www.w3.org/2000/svg")
+    }
+
+    fn child_elements(&self) -> Element {
+        let inverted_ratio = 1.0 - self.ratio;
+
+        let central_edge_ratio_e2_y =
+            _PYRAMID_CENTRAL_EDGE_Y_LEN * inverted_ratio + _PYRAMID_OFFSET_Y;
+
+        let left_edge_ratio_e1_x = _PYRAMID_OFFSET_X + (_PYRAMID_DIST_FROM_CENTRAL_X * self.ratio);
+        let right_edge_ratio_e1_x = _PYRAMID_OFFSET_X
+            + _PYRAMID_EDGES_E1_X
+            + (_PYRAMID_DIST_FROM_CENTRAL_X * inverted_ratio);
+        let no_central_edge_ratio_e1_y =
+            _PYRAMID_OFFSET_Y + (_PYRAMID_DIST_FROM_CENTRAL_E1_Y * inverted_ratio);
+
+        rsx! {
+            g {
+                stroke: "#fff",
+                "stroke-linejoin": "round",
+                "stroke-width": _PYRAMID_STROKE_WIDTH,
+                fill: "#{self.progress_color}",
+
+                path {
+                    fill: "#{self.color}",
+                    d: "\
+        M {_PYRAMID_EDGES_E1_X} {_PYRAMID_EDGES_E1_Y} \
+        L {_PYRAMID_RIGHT_EDGE_E2_X} {_PYRAMID_RIGHT_EDGE_E2_Y} \
+        L {_PYRAMID_EDGES_E1_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
+        M {_PYRAMID_EDGES_E1_X} {_PYRAMID_EDGES_E1_Y} \
+        L {_PYRAMID_LEFT_EDGE_E2_X} {_PYRAMID_LEFT_EDGE_E2_Y} \
+        L {_PYRAMID_EDGES_E1_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
+        M {_PYRAMID_EDGES_E1_X} {_PYRAMID_EDGES_E1_Y} \
+        V {_PYRAMID_CENTRAL_EDGE_Y_LEN}",
+                },
+                path {
+                    d: "\
+        M {_PYRAMID_CENTRAL_EDGE_E2_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
+        V {central_edge_ratio_e2_y} \
+        L {left_edge_ratio_e1_x} {no_central_edge_ratio_e1_y} \
+        L {_PYRAMID_LEFT_EDGE_E2_X} {_PYRAMID_LEFT_EDGE_E2_Y} Z",
+                },
+                path {
+                    d: "\
+        M {_PYRAMID_CENTRAL_EDGE_E2_X} {_PYRAMID_CENTRAL_EDGE_E2_Y} \
+        V {central_edge_ratio_e2_y} \
+        L {right_edge_ratio_e1_x} {no_central_edge_ratio_e1_y} \
+        L {_PYRAMID_RIGHT_EDGE_E2_X} {_PYRAMID_RIGHT_EDGE_E2_Y} Z",
+                }
+            }
+        }
+    }
+}
+
+#[derive(PartialEq, Clone, Props)]
+pub struct PyramidProps {
+    color: Option<String>,
+    #[props(default = 0.5)]
+    ratio: f64,
+    progress_color: Option<String>,
+}
+
+pub fn Pyramid(props: PyramidProps) -> Element {
+    let color = props.color.unwrap_or(COLOR_PRIMARY_100.to_string());
+    let progress_color = props
+        .progress_color
+        .unwrap_or(COLOR_TERNARY_100.to_string());
+
+    rsx! {
+        style { {STYLE_SHEET} },
+
+        Icon {
+            class: ClassName::PYRAMID_ICON,
+            icon: PyramidShape { ratio: props.ratio, color, progress_color },
+        }
+    }
+}