Skip to main content

dioxus_mdx/components/openapi/
parameters_list.rs

1//! Parameters list component for API endpoint documentation.
2
3use dioxus::prelude::*;
4
5use crate::parser::ApiParameter;
6
7use super::schema_viewer::SchemaViewer;
8
9/// Props for ParametersList component.
10#[derive(Props, Clone, PartialEq)]
11pub struct ParametersListProps {
12    /// The parameters to display.
13    pub parameters: Vec<ApiParameter>,
14}
15
16/// List of API parameters with type info.
17#[component]
18pub fn ParametersList(props: ParametersListProps) -> Element {
19    if props.parameters.is_empty() {
20        return rsx! {};
21    }
22
23    rsx! {
24        div { class: "space-y-1",
25            for param in &props.parameters {
26                ParameterItem { key: "{param.name}", parameter: param.clone() }
27            }
28        }
29    }
30}
31
32/// Props for ParameterItem component.
33#[derive(Props, Clone, PartialEq)]
34pub struct ParameterItemProps {
35    /// The parameter to display.
36    pub parameter: ApiParameter,
37}
38
39/// Single parameter item.
40#[component]
41pub fn ParameterItem(props: ParameterItemProps) -> Element {
42    let param = &props.parameter;
43    let location_badge = param.location.badge_class();
44    let location_str = param.location.as_str();
45
46    rsx! {
47        div { class: "border-b border-base-300 py-3 first:pt-0 last:border-b-0",
48            div { class: "flex items-center gap-2 flex-wrap",
49                // Parameter name
50                code { class: "font-mono font-semibold text-primary",
51                    "{param.name}"
52                }
53
54                // Location badge
55                span { class: "badge {location_badge} badge-sm badge-outline",
56                    "{location_str}"
57                }
58
59                // Type from schema
60                if let Some(schema) = &param.schema {
61                    span { class: "text-xs px-2 py-0.5 rounded-full bg-base-300 text-base-content/70",
62                        "{schema.display_type()}"
63                    }
64                }
65
66                // Required indicator
67                if param.required {
68                    span { class: "text-xs px-2 py-0.5 rounded-full bg-error/20 text-error",
69                        "required"
70                    }
71                }
72
73                // Deprecated indicator
74                if param.deprecated {
75                    span { class: "text-xs px-2 py-0.5 rounded-full bg-warning/20 text-warning line-through",
76                        "deprecated"
77                    }
78                }
79            }
80
81            // Description
82            if let Some(desc) = &param.description {
83                p { class: "mt-2 text-sm text-base-content/70",
84                    "{desc}"
85                }
86            }
87
88            // Schema details (for complex types)
89            if let Some(schema) = &param.schema {
90                if schema.is_complex() {
91                    div { class: "mt-2",
92                        SchemaViewer {
93                            schema: schema.clone(),
94                            depth: 1,
95                        }
96                    }
97                }
98            }
99
100            // Example
101            if let Some(example) = &param.example {
102                div { class: "mt-2",
103                    span { class: "text-xs text-base-content/50", "Example: " }
104                    code { class: "text-xs font-mono text-secondary",
105                        "{example}"
106                    }
107                }
108            }
109        }
110    }
111}