Progress bar

use hydroxy_leptos::progress_bar::{Jewel, ProgressBar, ProgressSize};
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (read, set_read) = signal(22.0);

    view! {
        <div style="display: grid; gap: var(--space-7);">
            // Controlled by the slider; the fill springs to each new width.
            <ProgressBar
                label="Reading interviews"
                value=Signal::derive(move || Some(read.get()))
                max=24.0
                value_text=Signal::derive(move || Some(format!("{} of 24", read.get())))
            />
            <input
                type="range"
                min="0"
                max="24"
                prop:value=move || read.get().to_string()
                on:input=move |ev| set_read.set(event_target_value(&ev).parse().unwrap_or(0.0))
                aria-label="Interviews read"
                style="accent-color: var(--accent);"
            />

            <ProgressBar label="Storage" value=64.0 jewel=Jewel::Emerald size=ProgressSize::Sm />

            // No value: indeterminate.
            <ProgressBar label="Drafting summary" />
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::progress_bar::{Jewel, ProgressBar, ProgressSize};

#[component]
pub fn ProgressBarDemo() -> Element {
    let mut read = use_signal(|| 22.0);

    rsx! {
        div { style: "display: grid; gap: var(--space-7);",
            ProgressBar {
                label: "Reading interviews",
                value: Some(read()),
                max: 24.0,
                value_text: Some(format!("{} of 24", read())),
            }
            input {
                r#type: "range",
                min: "0",
                max: "24",
                value: "{read}",
                oninput: move |e| read.set(e.value().parse().unwrap_or(0.0)),
                "aria-label": "Interviews read",
                style: "accent-color: var(--accent);",
            }
            ProgressBar { label: "Storage", value: Some(64.0), jewel: Jewel::Emerald, size: ProgressSize::Sm }
            ProgressBar { label: "Drafting summary" }
        }
    }
}