Due pill

use hydroxy_leptos::due_pill::DuePill;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    // A fixed "today" keeps the example stable; leave it out to use the real date.
    let tasks = [
        ("Send the Q3 summary", Some("2026-10-24")),
        ("Review flagged answers", Some("2026-10-27")),
        ("Plan the November interviews", Some("2026-11-12")),
        ("Archive old drafts", None),
    ];
    view! {
        <ul style="list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: 360px;">
            {tasks
                .into_iter()
                .map(|(task, date)| {
                    view! {
                        <li style="display: flex; align-items: center; justify-content: space-between; gap: 10px; font: var(--text-sm);">
                            {task}
                            <DuePill date=date.map(String::from) today="2026-10-26" />
                        </li>
                    }
                })
                .collect_view()}
        </ul>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::due_pill::DuePill;

#[component]
pub fn DuePillDemo() -> Element {
    let tasks = [
        ("Send the Q3 summary", Some("2026-10-24")),
        ("Review flagged answers", Some("2026-10-27")),
        ("Plan the November interviews", Some("2026-11-12")),
        ("Archive old drafts", None),
    ];
    rsx! {
        ul { style: "list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: 360px;",
            for (task, date) in tasks {
                li { style: "display: flex; align-items: center; justify-content: space-between; gap: 10px; font: var(--text-sm);",
                    "{task}"
                    DuePill { date: date.map(String::from), today: "2026-10-26" }
                }
            }
        }
    }
}