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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
use dioxus::prelude::*;
// Static emoji arrays to avoid lifetime issues in RSX
static FREQUENT: &[&str] = &["ð", "ð", "âĪïļ", "ð", "ð", "ðĨ", "ð", "ð"];
static SMILEYS: &[&str] = &[
"ð", "ð", "ð", "ð", "ð", "ð
", "ðĪĢ", "ð",
"ð", "ð", "ð", "ð", "ð", "ðĨ°", "ð", "ðĪĐ",
"ð", "ð", "ð", "ð", "ðĨē", "ð", "ð", "ð",
"ðĪŠ", "ð", "ðĪ", "ðĪ", "ðĪ", "ðĪŦ", "ðĪ", "ðŦĄ",
];
static GESTURES: &[&str] = &[
"ð", "ð", "ð", "ðĪ", "ðĪ", "âïļ", "ðĪ", "ðŦ°",
"ðĪ", "ðĪ", "ðĪ", "ð", "ð", "ð", "ð", "âïļ",
"ð", "ðĪ", "ðïļ", "â", "ð", "ð", "ð", "ðŦķ",
];
/// Emoji picker popup component.
#[component]
pub fn EmojiPicker(
on_select: EventHandler<String>,
on_close: EventHandler<()>,
) -> Element {
let mut search = use_signal(|| String::new());
rsx! {
div {
class: "emoji-picker",
div {
class: "emoji-picker__search",
input {
r#type: "text",
placeholder: "Search emoji...",
value: "{search}",
oninput: move |evt| search.set(evt.value()),
autofocus: true,
}
}
div {
class: "emoji-picker__categories",
// Frequently used
div {
class: "emoji-picker__section",
h4 { class: "emoji-picker__section-title", "Frequently Used" }
div {
class: "emoji-picker__grid",
for emoji in FREQUENT.iter() {
{
let emoji_str = emoji.to_string();
rsx! {
button {
class: "emoji-picker__emoji",
onclick: move |_| on_select.call(emoji_str.clone()),
"{emoji}"
}
}
}
}
}
}
// Smileys
div {
class: "emoji-picker__section",
h4 { class: "emoji-picker__section-title", "Smileys" }
div {
class: "emoji-picker__grid",
for emoji in SMILEYS.iter() {
{
let emoji_str = emoji.to_string();
rsx! {
button {
class: "emoji-picker__emoji",
onclick: move |_| on_select.call(emoji_str.clone()),
"{emoji}"
}
}
}
}
}
}
// Gestures
div {
class: "emoji-picker__section",
h4 { class: "emoji-picker__section-title", "Gestures" }
div {
class: "emoji-picker__grid",
for emoji in GESTURES.iter() {
{
let emoji_str = emoji.to_string();
rsx! {
button {
class: "emoji-picker__emoji",
onclick: move |_| on_select.call(emoji_str.clone()),
"{emoji}"
}
}
}
}
}
}
}
}
}
}