Popover

use leptos::prelude::*;
use leptos_meta::Stylesheet;

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                     ✨ FUNCTIONS ✨                        */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[component]
pub fn DemoPopover() -> impl IntoView {
    view! {
        <Stylesheet href="/components/popover.css" />

        <div class="mainDiv">
            <section class="prompt">
                <b>"👇 Scroll down to the anchor 👇"</b>
                <p>
                    This demo scrolls so you can test and preview
                    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-order">
                        <code>position-try-order</code>
                    </a>and
                    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position-visibility">
                        <code>position-visibility</code>
                    </a>.
                </p>
            </section>

            <button class="icon-btn" popovertarget="demo">
                ANCHOR
            </button>

            <div class="floaty" id="demo" popover>
                <button popovertarget="demo" popoveraction="close">
                    X
                </button>
                <header>Over Easy</header>
                <section>
                    <p>Positioned to the anchor!</p>
                </section>
            </div>
        </div>
    }
}