🎨 Replace sir with turf + move css to dedicated scss files

src/components/contacts.rs

@@ -1,10 +1,13 @@
 use dioxus::prelude::*;
 use dioxus_free_icons::icons::io_icons::IoChevronDown;
 use dioxus_free_icons::Icon;
-use sir::global_css;
+
+turf::style_sheet!("src/components/contacts.scss");
 
 fn ContactsArrow(cx: Scope) -> Element {
     cx.render(rsx! {
+        style { STYLE_SHEET },
+
         Icon {
             icon: IoChevronDown,
         },
@@ -12,86 +15,26 @@ fn ContactsArrow(cx: Scope) -> Element {
 }
 
 pub fn Contacts(cx: Scope) -> Element {
-    // TODO: Use @extend once implemented (https://github.com/kaj/rsass/issues/65)
-    global_css!(
-        "
-        .contacts {
-             height: 72%;
-             width: 100%;
-             background-color: white;
-             font-size: 8pt;
-
-             &.active {
-                 ul {
-                     opacity: 0;
-                 }
-
-                 svg {
-                     transform: rotate(180deg);
-                 }
-
-             }
-
-             .header {
-                 height: 2%;
-                 width: 98%;
-                 display: flex;
-                 flex-direction: row;
-                 align-items: center;
-                 cursor: pointer;
-                 margin: 0;
-                 margin-left: 1%;
-                 padding-top: 1%;
-                 font-weight: bold;
-             }
-
-             ul {
-                 height: 100%;
-                 margin: 0;
-                 overflow: hidden;
-                 opacity: 1;
-                 transition: 0.4s ease;
-             }
-
-             li {
-                 list-style-type: none;
-                 height: 2%;
-                 margin: 0 auto;
-                 cursor: pointer;
-                 display: flex;
-                 flex-direction: row;
-                 align-items: center;
-                 justify-content: flex-start;
-
-                 img {
-                     height: 100%;
-                     aspect-ratio: 1;
-                 }
-             }
-
-             svg {
-                 transition: 0.4s ease;
-             }
-
-             .contact {
-                 list-style-type: none
-                 margin: 0 auto
-                 text-align: left
-                 cursor: pointer
-             }
-        }
-        "
-    );
-
     let show_contacts = use_state(cx, || false);
-    let contacts_active = if **show_contacts { "active" } else { "" };
+
+    let classes = vec![
+        ClassName::CONTACTS,
+        if **show_contacts {
+            ClassName::ACTIVE
+        } else {
+            ""
+        },
+    ]
+    .join(" ");
 
     cx.render(rsx! {
+        style { STYLE_SHEET },
+
         div {
-            class: "contacts {contacts_active}",
+            class: "{classes}",
 
             p {
-                class: "header",
+                class: ClassName::HEADER,
                 onclick: move |_| show_contacts.set(!show_contacts),
 
                 ContactsArrow {},