Emoji picker

use hydroxy_leptos::emoji_picker::{EmojiPicker, SkinTone};
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let recent = RwSignal::new(vec!["👍".to_string(), "🔥".to_string(), "😂".to_string()]);
    let tone = RwSignal::new(SkinTone::Default);
    let picked = RwSignal::new(None::<(String, String)>);

    view! {
        <div style="display: grid; gap: var(--space-3); justify-items: start;">
            <div style="border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-2);">
                <EmojiPicker
                    on_select=move |p| picked.set(Some(p))
                    recent=recent
                    on_recent_change=move |list| recent.set(list)
                    skin_tone=Signal::derive(move || Some(tone.get()))
                    on_skin_tone_change=move |t| tone.set(t)
                />
            </div>
            <p style="margin: 0; font: var(--text-sm); color: var(--text-2);">
                {move || picked.get().map_or_else(|| "Nothing picked yet".to_string(), |(e, name)| format!("Picked {e} ({name})"))}
            </p>
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::emoji_picker::{EmojiPicker, SkinTone};

#[component]
pub fn EmojiPickerDemo() -> Element {
    let mut recent = use_signal(|| vec!["👍".to_string(), "🔥".to_string(), "😂".to_string()]);
    let mut tone = use_signal(|| SkinTone::Default);
    let mut picked = use_signal(|| None::<(String, String)>);
    let text = picked().map_or_else(|| "Nothing picked yet".to_string(), |(e, name)| format!("Picked {e} ({name})"));

    rsx! {
        div { style: "display: grid; gap: var(--space-3); justify-items: start;",
            div { style: "border: 1px solid var(--border-1); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-2);",
                EmojiPicker {
                    on_select: move |p| picked.set(Some(p)),
                    recent: recent(),
                    on_recent_change: move |list| recent.set(list),
                    skin_tone: Some(tone()),
                    on_skin_tone_change: move |t| tone.set(t),
                }
            }
            p { style: "margin: 0; font: var(--text-sm); color: var(--text-2);", "{text}" }
        }
    }
}