dioxus_tw_components/components/
callout.rs

1use crate::components::icon::*;
2use dioxus::prelude::*;
3use dioxus_core::AttributeValue;
4
5#[derive(Clone, PartialEq, Props)]
6pub struct CalloutProps {
7    #[props(extends = div, extends = GlobalAttributes)]
8    attributes: Vec<Attribute>,
9
10    title: std::string::String,
11
12    #[props(optional, default)]
13    pub icon: Option<Icons>,
14
15    children: Element,
16}
17
18#[component]
19pub fn Callout(mut props: CalloutProps) -> Element {
20    let icon = if let Some(data_attribute) = props
21        .attributes
22        .iter()
23        .find(|attr| attr.name == "data-variant")
24    {
25        if let AttributeValue::Text(ref value) = data_attribute.value {
26            match value.as_str() {
27                "tip" => Icons::Lightbulb,
28                "warning" => Icons::Warning,
29                "caution" => Icons::Report,
30                "info" | &_ => Icons::Info,
31            }
32        } else {
33            Icons::Info
34        }
35    } else {
36        Icons::Info
37    };
38
39    let default_classes = "callout";
40    crate::setup_class_attribute(&mut props.attributes, default_classes);
41
42    rsx! {
43        div {..props.attributes,
44            div { style: "display: flex; flex-direction: row; vertical-align: middle;",
45                Icon {
46                    style: "margin-right: 0.5rem; font-size: 0.875rem;",
47                    icon: if props.icon.is_some() { props.icon.unwrap() } else { icon },
48                }
49                "{props.title}"
50            }
51            div { style: "font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 70%, transparent)",
52                {props.children}
53            }
54        }
55    }
56}
dioxus_tw_components/components/callout.rs

dioxus_tw_components/components/
callout.rs
