Rating

use hydroxy_leptos::rating::Rating;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (score, set_score) = signal(3.5);

    view! {
        <div style="display: grid; gap: var(--space-6); justify-items: start;">
            // Controlled, half stars, click the current score again to clear.
            <div style="display: flex; align-items: center; gap: var(--space-4);">
                <Rating
                    label="Answer quality"
                    value=score
                    allow_half=true
                    clearable=true
                    on_value_change=move |v| set_score.set(v)
                />
                <span style="font: 500 12px/1 var(--font-mono); color: var(--text-2);">
                    {move || format!("{} / 5", score.get())}
                </span>
            </div>

            // Uncontrolled, three stars, submitted with a form.
            <Rating label="Difficulty" count=3 default_value=2.0 size=16 name="difficulty" />

            // Display only.
            <Rating default_value=4.5 allow_half=true read_only=true />
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::rating::Rating;

#[component]
pub fn RatingDemo() -> Element {
    let mut score = use_signal(|| 3.5);

    rsx! {
        div { style: "display: grid; gap: var(--space-6); justify-items: start;",
            div { style: "display: flex; align-items: center; gap: var(--space-4);",
                Rating {
                    label: "Answer quality",
                    value: Some(score()),
                    allow_half: true,
                    clearable: true,
                    on_value_change: move |v| score.set(v),
                }
                span { style: "font: 500 12px/1 var(--font-mono); color: var(--text-2);", "{score} / 5" }
            }
            Rating { label: "Difficulty", count: 3, default_value: 2.0, size: 16, name: "difficulty" }
            Rating { default_value: 4.5, allow_half: true, read_only: true }
        }
    }
}