synpad 0.1.0

A full-featured Matrix chat client built with Dioxus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

use dioxus::prelude::*;

/// Search input component with clear button.
#[component]
pub fn SearchInput(
    value: String,
    on_input: EventHandler<String>,
    placeholder: Option<String>,
) -> Element {
    let placeholder_text = placeholder.unwrap_or_else(|| "Search...".to_string());

    rsx! {
        div {
            class: "search-input",
            span { class: "search-input__icon", "🔍" }
            input {
                class: "search-input__field",
                r#type: "text",
                placeholder: "{placeholder_text}",
                value: "{value}",
                oninput: move |evt| on_input.call(evt.value()),
            }
            if !value.is_empty() {
                button {
                    class: "search-input__clear",
                    onclick: move |_| on_input.call(String::new()),
                    "✕"
                }
            }
        }
    }
}