maud_ui/primitives/
hover_card.rs

1//! HoverCard component — richer hover overlay with structured content
2
3use maud::{html, Markup};
4
5/// HoverCard rendering properties
6#[derive(Debug, Clone)]
7pub struct Props {
8    /// The trigger element (link, button, text, etc.)
9    pub trigger: Markup,
10    /// The rich content displayed in the card
11    pub content: Markup,
12    /// Unique identifier for the card
13    pub id: String,
14    /// Delay in milliseconds before showing (default 300)
15    pub open_delay_ms: u32,
16    /// Delay in milliseconds before closing (default 200)
17    pub close_delay_ms: u32,
18}
19
20impl Default for Props {
21    fn default() -> Self {
22        Self {
23            trigger: html! {},
24            content: html! {},
25            id: "hover-card".to_string(),
26            open_delay_ms: 300,
27            close_delay_ms: 200,
28        }
29    }
30}
31
32/// Render a single hover card with the given properties
33pub fn render(props: Props) -> Markup {
34    let card_id = format!("{}-card", props.id);
35
36    html! {
37        span.mui-hover-card
38            data-mui="hover-card"
39            data-open-delay=(props.open_delay_ms.to_string())
40            data-close-delay=(props.close_delay_ms.to_string())
41        {
42            span.mui-hover-card__trigger {
43                (props.trigger)
44            }
45            div.mui-hover-card__content
46                id=(card_id)
47                hidden
48                data-visible="false"
49            {
50                (props.content)
51            }
52        }
53    }
54}
55
56/// Showcase with a user profile card
57pub fn showcase() -> Markup {
58    let user_card = html! {
59        div.mui-hover-card__user {
60            div.mui-hover-card__user-header {
61                span.mui-avatar.mui-avatar--md {
62                    span.mui-avatar__fallback { "@" }
63                }
64                div.mui-hover-card__user-info {
65                    p.mui-hover-card__user-name { "shadcn" }
66                    p.mui-hover-card__user-handle { "@shadcn" }
67                }
68            }
69            p.mui-hover-card__user-bio {
70                "Crafting beautiful, accessible interfaces. Passionate about design systems."
71            }
72            button.mui-btn.mui-btn--primary.mui-btn--sm { "Follow" }
73        }
74    };
75
76    html! {
77        div.mui-showcase__grid {
78            div {
79                p.mui-showcase__caption { "HoverCard" }
80                div.mui-showcase__row {
81                    (render(Props {
82                        trigger: html! { a href="#" style="color:var(--mui-accent-text);" { "@shadcn" } },
83                        content: user_card,
84                        id: "demo-hover-1".into(),
85                        open_delay_ms: 300,
86                        close_delay_ms: 200,
87                    }))
88                }
89            }
90        }
91    }
92}
maud_ui/primitives/hover_card.rs

maud_ui/primitives/
hover_card.rs
