chat_ui_components/components/
room_prompt.rs

1use dioxus::prelude::*;
2use chat_core::room::generate_random_nickname;
3
4#[component]
5pub fn RoomPrompt(on_join: EventHandler<String>) -> Element {
6    let mut room_input = use_signal(generate_random_nickname);
7
8    let submit = move || {
9        let val = room_input.read().trim().to_string();
10        if !val.is_empty() {
11            on_join.call(val);
12        }
13    };
14
15    rsx! {
16        div {
17            class: "room-prompt-overlay",
18            div {
19                class: "room-prompt-box",
20                h2 { "Join a Room" }
21                input {
22                    id: "room-name-input",
23                    value: "{room_input}",
24                    oninput: move |evt| room_input.set(evt.value().clone()),
25                            onkeypress: move |evt| {
26                                if evt.key().to_string() == "Enter" {
27                                    submit();
28                                }
29                            }
30                }
31                button {
32                    class: "btn-primary",
33                    id: "room-join-btn",
34                    onclick: move |_| submit(),
35                    "Join"
36                }
37                p {
38                    class: "room-hint",
39                    "Enter a room name or use the suggestion above."
40                }
41            }
42        }
43    }
44}