Sheet

use hydroxy_leptos::button::ButtonVariant;
use hydroxy_leptos::sheet::*;
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    let (filters_open, set_filters_open) = signal(false);

    view! {
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-3);">
            // Uncontrolled, from the inline end edge (right in LTR).
            <Sheet>
                <SheetTrigger variant=ButtonVariant::Primary>"Project details"</SheetTrigger>
                <SheetContent>
                    <SheetHeader>
                        <SheetTitle>"Q3 customer research"</SheetTitle>
                        <SheetDescription>"12 files, 3 summaries. Updated 2 hours ago."</SheetDescription>
                        <SheetCloseIcon />
                    </SheetHeader>
                    <SheetBody>
                        <p>"Interviews with 18 customers across retail and logistics, grouped by theme."</p>
                        <p>"Summaries cite their sources, so every claim links back to a transcript."</p>
                    </SheetBody>
                    <SheetFooter>
                        <SheetClose variant=ButtonVariant::Secondary>"Close"</SheetClose>
                        <SheetClose variant=ButtonVariant::Accent>"Open project"</SheetClose>
                    </SheetFooter>
                </SheetContent>
            </Sheet>

            // Controlled, from the bottom edge.
            <Sheet open=filters_open on_open_change=move |open| set_filters_open.set(open)>
                <SheetTrigger variant=ButtonVariant::Secondary>"Filters"</SheetTrigger>
                <SheetContent side=SheetSide::Bottom>
                    <SheetHeader>
                        <SheetTitle>"Filter sources"</SheetTitle>
                        <SheetCloseIcon />
                    </SheetHeader>
                    <SheetBody>
                        <p>"Show transcripts, notes and summaries from the last 90 days."</p>
                    </SheetBody>
                    <SheetFooter>
                        <SheetClose variant=ButtonVariant::Primary>"Apply filters"</SheetClose>
                    </SheetFooter>
                </SheetContent>
            </Sheet>
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::button::ButtonVariant;
use hydroxy_dioxus::sheet::{
    Sheet, SheetBody, SheetClose, SheetCloseIcon, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetSide,
    SheetTitle, SheetTrigger,
};

#[component]
pub fn SheetDemo() -> Element {
    let mut filters_open = use_signal(|| Some(false));

    rsx! {
        div { style: "display: flex; flex-wrap: wrap; gap: var(--space-3);",
            // Uncontrolled, from the inline end edge (right in LTR).
            Sheet {
                SheetTrigger { variant: ButtonVariant::Primary, "Project details" }
                SheetContent {
                    SheetHeader {
                        SheetTitle { "Q3 customer research" }
                        SheetDescription { "12 files, 3 summaries. Updated 2 hours ago." }
                        SheetCloseIcon {}
                    }
                    SheetBody {
                        p { "Interviews with 18 customers across retail and logistics, grouped by theme." }
                        p { "Summaries cite their sources, so every claim links back to a transcript." }
                    }
                    SheetFooter {
                        SheetClose { variant: ButtonVariant::Secondary, "Close" }
                        SheetClose { variant: ButtonVariant::Accent, "Open project" }
                    }
                }
            }

            // Controlled, from the bottom edge.
            Sheet {
                open: filters_open(),
                on_open_change: move |open| filters_open.set(Some(open)),
                SheetTrigger { variant: ButtonVariant::Secondary, "Filters" }
                SheetContent { side: SheetSide::Bottom,
                    SheetHeader {
                        SheetTitle { "Filter sources" }
                        SheetCloseIcon {}
                    }
                    SheetBody {
                        p { "Show transcripts, notes and summaries from the last 90 days." }
                    }
                    SheetFooter {
                        SheetClose { variant: ButtonVariant::Primary, "Apply filters" }
                    }
                }
            }
        }
    }
}