canonrs-server 0.1.0

CanonRS server-side rendering support
use leptos::prelude::*;
use super::modal_boundary::{Modal, ModalTrigger, ModalPortal, ModalOverlay, ModalContent, ModalTitle, ModalDescription, ModalClose, ModalFooter};
use canonrs_core::primitives::layout::stack::{StackPrimitive as Stack, StackDirection, StackGap};
use crate::ui::button::button_boundary::Button;
use canonrs_core::primitives::ButtonVariant;

#[component]
pub fn ModalShowcasePreview() -> impl IntoView {
    view! {
        <Stack direction=StackDirection::Vertical gap=StackGap::Lg>
            <p data-rs-showcase-preview-anchor="">
                "Modal accessibility and lifecycle enforced via primitives."
            </p>
            <Modal>
                <ModalTrigger>"Open Modal"</ModalTrigger>
                <ModalPortal>
                <ModalOverlay />
                <ModalContent>
                    <ModalTitle>"Confirm action"</ModalTitle>
                    <ModalDescription>"Are you sure? This action cannot be undone."</ModalDescription>
                    <ModalFooter>
                        <ModalClose>"Cancel"</ModalClose>
                        <Button variant=ButtonVariant::Primary>"Confirm"</Button>
                    </ModalFooter>
                </ModalContent>
                </ModalPortal>
            </Modal>
            <Stack direction=StackDirection::Vertical gap=StackGap::Sm>
                <span data-rs-showcase-preview-label="">"Form dialog"</span>
                <Modal>
                    <ModalTrigger>"Edit profile"</ModalTrigger>
                    <ModalPortal>
                    <ModalOverlay />
                    <ModalContent>
                        <ModalTitle>"Edit profile"</ModalTitle>
                        <ModalDescription>"Update your profile information below."</ModalDescription>
                        <ModalFooter>
                            <ModalClose>"Cancel"</ModalClose>
                            <Button variant=ButtonVariant::Primary>"Save changes"</Button>
                        </ModalFooter>
                    </ModalContent>
                    </ModalPortal>
                </Modal>
            </Stack>
        </Stack>
    }
}