🎨 Split ChatsWindow component

Creation of the Navbar and Conversation components.
2024-01-01 21:52:31 +01:00
parent a8d343ce3a
commit a7cf0f681a
6 changed files with 276 additions and 252 deletions
--- a/src/components/chats_window/conversation.rs
+++ b/src/components/chats_window/conversation.rs
@@ -0,0 +1,80 @@
+use dioxus::prelude::*;
+use tracing::debug;
+
+use super::edit_section::EditSection;
+use crate::components::avatar_selector::AvatarSelector;
+use crate::components::icons::DownArrowIcon;
+
+turf::style_sheet!("src/components/chats_window/conversation.scss");
+
+pub(super) fn Conversation(cx: Scope) -> Element {
+    debug!("Conversation {} rendering", "TBD");
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        div {
+            class: ClassName::CONVERSATION,
+            div {
+                class: ClassName::ROOM_EVENTS,
+                ul {
+                    li {
+                        class: ClassName::ROOM_EVENT,
+                        div {
+                            p {
+                                class: ClassName::TITLE,
+                                "MON POTE says:"
+                            },
+                            p {
+                                class: ClassName::CONTENT,
+                                "Coucou mon pote",
+                            },
+                        },
+                    },
+                },
+            },
+            div {
+                class: ClassName::OTHER_AVATAR_SELECTOR_CONTAINER,
+                div {
+                    class: ClassName::AVATAR_SELECTOR,
+                    AvatarSelector {},
+                },
+                div {
+                    class: ClassName::WEBCAM,
+                    img {
+                        src: "images/webcam.svg"
+                    },
+                },
+                div {
+                    class: ClassName::ARROW_ICON,
+                    DownArrowIcon {}
+                },
+            },
+            div {
+                class: ClassName::HOLDER,
+                "••••••"
+            },
+            div {
+                class: ClassName::EDIT_SECTION,
+                EditSection {},
+            },
+            div {
+                class: ClassName::MY_AVATAR_SELECTOR_CONTAINER,
+                div {
+                    class: ClassName::AVATAR_SELECTOR,
+                    AvatarSelector {},
+                },
+                div {
+                    class: ClassName::WEBCAM,
+                    img {
+                        src: "images/webcam.svg"
+                    },
+                },
+                div {
+                    class: ClassName::ARROW_ICON,
+                    DownArrowIcon {}
+                },
+            },
+        },
+    })
+}