Pagination

use hydroxy_leptos::pagination::Pagination;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (page, set_page) = signal(5_usize);

    view! {
        <div style="display: grid; gap: var(--space-6);">
            // Controlled, with the page shown alongside.
            <div style="display: grid; gap: var(--space-3);">
                <Pagination count=12 page=page on_page_change=move |p| set_page.set(p) />
                <span style="color: var(--text-2);">"Showing sources " {move || (page.get() - 1) * 10 + 1} "–" {move || page.get() * 10} " of 120"</span>
            </div>

            // Uncontrolled, two pages either side and two at each end.
            <Pagination count=40 default_page=20 siblings=2 boundaries=2 label="Search results pages" />
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::pagination::Pagination;

#[component]
pub fn PaginationDemo() -> Element {
    let mut page = use_signal(|| 5_usize);
    let (first, last) = ((page() - 1) * 10 + 1, page() * 10);

    rsx! {
        div { style: "display: grid; gap: var(--space-6);",
            // Controlled, with the page shown alongside.
            div { style: "display: grid; gap: var(--space-3);",
                Pagination { count: 12_usize, page: Some(page()), on_page_change: move |p| page.set(p) }
                span { style: "color: var(--text-2);", "Showing sources {first}–{last} of 120" }
            }

            // Uncontrolled, two pages either side and two at each end.
            Pagination { count: 40_usize, default_page: 20, siblings: 2, boundaries: 2, label: "Search results pages" }
        }
    }
}