Hover card

use hydroxy_leptos::hover_card::*;
use leptos::prelude::*;

#[component]
pub fn Demo() -> impl IntoView {
    view! {
        // A <div>, not a <p>: the card is a block element.
        <div>
            "Summary drafted by "
            <HoverCard>
                <HoverCardTrigger href="#">"@maya"</HoverCardTrigger>
                <HoverCardContent>
                    <div style="display: grid; gap: var(--space-2);">
                        <strong>"Maya Okafor"</strong>
                        <span style="color: var(--text-2);">"Research lead. Owns the Q3 customer interviews and 4 summaries."</span>
                    </div>
                </HoverCardContent>
            </HoverCard>
            " from 18 interviews."
        </div>
    }
}

use dioxus::prelude::*;
use hydroxy_dioxus::hover_card::{HoverCard, HoverCardContent, HoverCardTrigger};

#[component]
pub fn HoverCardDemo() -> Element {
    rsx! {
        // A div, not a p: the card is a block element.
        div {
            "Summary drafted by "
            HoverCard {
                HoverCardTrigger { href: "#", "@maya" }
                HoverCardContent {
                    div { style: "display: grid; gap: var(--space-2);",
                        strong { "Maya Okafor" }
                        span { style: "color: var(--text-2);",
                            "Research lead. Owns the Q3 customer interviews and 4 summaries."
                        }
                    }
                }
            }
            " from 18 interviews."
        }
    }
}