Toggle button

use hydroxy_leptos::icon::{Icon, IconName};
use hydroxy_leptos::toggle_button::ToggleButton;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (starred, set_starred) = signal(false);

    view! {
        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);">
            // Controlled.
            <ToggleButton pressed=starred on_pressed_change=move |v| set_starred.set(v)>
                <Icon name=IconName::Star size=14 />
                {move || if starred.get() { "Starred" } else { "Star" }}
            </ToggleButton>

            // Icon only: give it a label.
            <ToggleButton label="Pin" default_pressed=true>
                <Icon name=IconName::Mark size=14 />
            </ToggleButton>

            <ToggleButton>"Show sources"</ToggleButton>
            <ToggleButton disabled=true>"Disabled"</ToggleButton>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::icon::{Icon, IconName};
use hydroxy_dioxus::toggle_button::ToggleButton;

#[component]
pub fn ToggleButtonDemo() -> Element {
    let mut starred = use_signal(|| false);

    rsx! {
        div { style: "display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);",
            ToggleButton {
                pressed: Some(starred()),
                on_pressed_change: move |v| starred.set(v),
                Icon { name: IconName::Star, size: 14 }
                if starred() { "Starred" } else { "Star" }
            }
            ToggleButton { label: "Pin", default_pressed: true,
                Icon { name: IconName::Mark, size: 14 }
            }
            ToggleButton { "Show sources" }
            ToggleButton { disabled: true, "Disabled" }
        }
    }
}