Filter chip

use hydroxy_leptos::filter_chip::FilterChip;
use hydroxy_leptos::icon::IconName;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (overdue, set_overdue) = signal(true);
    let (mine, set_mine) = signal(false);
    view! {
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-3);">
            <FilterChip label="Status" count=2 active=true dropdown=true />
            <FilterChip label="Owner" dropdown=true />
            <FilterChip
                label="Overdue"
                icon=IconName::CircleAlert
                active=overdue
                on_click=move || set_overdue.update(|v| *v = !*v)
            />
            <FilterChip label="Mine" icon=IconName::User active=mine on_click=move || set_mine.update(|v| *v = !*v) />
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::filter_chip::FilterChip;
use hydroxy_dioxus::icon::IconName;

#[component]
pub fn FilterChipDemo() -> Element {
    let mut overdue = use_signal(|| true);
    let mut mine = use_signal(|| false);
    rsx! {
        div { style: "display: flex; flex-wrap: wrap; gap: var(--space-3);",
            FilterChip { label: "Status", count: Some(2), active: true, dropdown: true }
            FilterChip { label: "Owner", dropdown: true }
            FilterChip {
                label: "Overdue",
                icon: IconName::CircleAlert,
                active: overdue(),
                on_click: move |()| overdue.toggle(),
            }
            FilterChip { label: "Mine", icon: IconName::User, active: mine(), on_click: move |()| mine.toggle() }
        }
    }
}