Skip to main content

dioxus_mdx/components/
param_field.rs

1//! ParamField component for API parameter documentation.
2
3use dioxus::prelude::*;
4
5use crate::components::DocNodeRenderer;
6use crate::parser::ParamFieldNode;
7
8/// Props for DocParamField component.
9#[derive(Props, Clone, PartialEq)]
10pub struct DocParamFieldProps {
11    /// The parameter field to render.
12    pub field: ParamFieldNode,
13}
14
15/// API parameter documentation field.
16#[component]
17pub fn DocParamField(props: DocParamFieldProps) -> Element {
18    let field = &props.field;
19
20    rsx! {
21        div { class: "border-b border-base-300 py-4 first:pt-0 last:border-b-0",
22            div { class: "flex items-center gap-3 flex-wrap",
23                // Parameter name - primary colored monospace
24                code { class: "font-mono font-semibold text-primary",
25                    "{field.name}"
26                }
27                // Type badge - subtle gray
28                span { class: "text-xs px-2 py-0.5 rounded-full bg-base-300 text-base-content/70",
29                    "{field.param_type}"
30                }
31                // Required indicator
32                if field.required {
33                    span { class: "text-xs px-2 py-0.5 rounded-full bg-error/20 text-error",
34                        "required"
35                    }
36                }
37                // Default value - styled as code badge
38                if let Some(default) = &field.default {
39                    span { class: "text-xs px-2 py-0.5 rounded-full bg-base-300 text-base-content/70 font-mono",
40                        "default:"
41                        span { class: "text-primary", "\"{default}\"" }
42                    }
43                }
44            }
45            // Description - render nested content
46            if !field.content.is_empty() {
47                div {
48                    class: "mt-2 text-base-content/70",
49                    for (i, node) in field.content.iter().enumerate() {
50                        DocNodeRenderer { key: "{i}", node: node.clone() }
51                    }
52                }
53            }
54        }
55    }
56}