Tag

use hydroxy_leptos::tag::{Jewel, Tag};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (interviews, set_interviews) = signal(true);
    let (tickets, set_tickets) = signal(false);
    let (sources, set_sources) = signal(vec!["interviews-q3.pdf", "tickets-sept.csv", "nps-august.xlsx"]);

    view! {
        <div style="display: grid; gap: var(--space-5);">
            // Toggle filters: a clickable tag is a button with aria-pressed.
            <div style="display: flex; flex-wrap: wrap; gap: var(--space-3);">
                <Tag jewel=Jewel::Amethyst selected=interviews on_click=move |()| set_interviews.update(|on| *on = !*on)>
                    "Interviews"
                </Tag>
                <Tag jewel=Jewel::Sapphire selected=tickets on_click=move |()| set_tickets.update(|on| *on = !*on)>
                    "Support tickets"
                </Tag>
                <Tag jewel=Jewel::Citrine>"Q3 research"</Tag>
            </div>

            // Removable.
            <div style="display: flex; flex-wrap: wrap; gap: var(--space-3);">
                <For
                    each=move || sources.get()
                    key=|source| *source
                    children=move |source| {
                        view! {
                            <Tag
                                jewel=Jewel::Emerald
                                on_remove=move |()| set_sources.update(|list| list.retain(|s| *s != source))
                            >
                                {source}
                            </Tag>
                        }
                    }
                />
            </div>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::tag::{Jewel, Tag};

#[component]
pub fn TagDemo() -> Element {
    let mut interviews = use_signal(|| true);
    let mut tickets = use_signal(|| false);
    let mut sources = use_signal(|| vec!["interviews-q3.pdf", "tickets-sept.csv", "nps-august.xlsx"]);

    rsx! {
        div { style: "display: grid; gap: var(--space-5);",
            // Toggle filters: a clickable tag is a button with aria-pressed.
            div { style: "display: flex; flex-wrap: wrap; gap: var(--space-3);",
                Tag {
                    jewel: Jewel::Amethyst,
                    selected: interviews(),
                    on_click: move |()| interviews.toggle(),
                    "Interviews"
                }
                Tag {
                    jewel: Jewel::Sapphire,
                    selected: tickets(),
                    on_click: move |()| tickets.toggle(),
                    "Support tickets"
                }
                Tag { jewel: Jewel::Citrine, "Q3 research" }
            }

            // Removable.
            div { style: "display: flex; flex-wrap: wrap; gap: var(--space-3);",
                for source in sources() {
                    Tag {
                        key: "{source}",
                        jewel: Jewel::Emerald,
                        on_remove: move |()| sources.write().retain(|s| *s != source),
                        "{source}"
                    }
                }
            }
        }
    }
}