Chip

use hydroxy_leptos::chip::{Chip, Jewel};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (labels, set_labels) = signal(vec!["onboarding", "billing", "export"]);

    view! {
        <div style="display: grid; gap: var(--space-5);">
            <div style="display: flex; flex-wrap: wrap; gap: var(--space-2);">
                <Chip jewel=Jewel::Garnet>"P0"</Chip>
                <Chip jewel=Jewel::Sapphire>"OX-142"</Chip>
                <Chip>"22 of 24"</Chip>
                <Chip mono=false>"Design review"</Chip>
            </div>

            // Removable.
            <div style="display: flex; flex-wrap: wrap; gap: var(--space-2);">
                <For
                    each=move || labels.get()
                    key=|label| *label
                    children=move |label| {
                        view! {
                            <Chip
                                jewel=Jewel::Amethyst
                                on_remove=move |()| set_labels.update(|list| list.retain(|l| *l != label))
                            >
                                {label}
                            </Chip>
                        }
                    }
                />
            </div>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::chip::{Chip, Jewel};

#[component]
pub fn ChipDemo() -> Element {
    let mut labels = use_signal(|| vec!["onboarding", "billing", "export"]);

    rsx! {
        div { style: "display: grid; gap: var(--space-5);",
            div { style: "display: flex; flex-wrap: wrap; gap: var(--space-2);",
                Chip { jewel: Jewel::Garnet, "P0" }
                Chip { jewel: Jewel::Sapphire, "OX-142" }
                Chip { "22 of 24" }
                Chip { mono: false, "Design review" }
            }

            // Removable.
            div { style: "display: flex; flex-wrap: wrap; gap: var(--space-2);",
                for label in labels() {
                    Chip {
                        key: "{label}",
                        jewel: Jewel::Amethyst,
                        on_remove: move |()| labels.write().retain(|l| *l != label),
                        "{label}"
                    }
                }
            }
        }
    }
}