dioxus_mdx/components/
tabs.rs

1//! Tabs component for documentation.
2
3use dioxus::prelude::*;
4
5use crate::components::DocNodeRenderer;
6use crate::parser::{DocNode, TabsNode};
7
8/// Props for DocTabs component.
9#[derive(Props, Clone, PartialEq)]
10pub struct DocTabsProps {
11    /// Tabs data.
12    pub tabs: TabsNode,
13}
14
15/// Tabbed content component using DaisyUI tabs.
16#[component]
17pub fn DocTabs(props: DocTabsProps) -> Element {
18    let mut active_tab = use_signal(|| 0usize);
19
20    rsx! {
21        div { class: "my-6",
22            // Tab headers - refined underline style
23            div { class: "flex border-b border-base-content/10 mb-4",
24                for (i, tab) in props.tabs.tabs.iter().enumerate() {
25                    button {
26                        key: "{i}",
27                        class: if active_tab() == i {
28                            "px-4 py-2.5 text-sm font-medium text-primary border-b-2 border-primary -mb-px transition-colors"
29                        } else {
30                            "px-4 py-2.5 text-sm font-medium text-base-content/60 hover:text-base-content border-b-2 border-transparent -mb-px transition-colors"
31                        },
32                        onclick: move |_| active_tab.set(i),
33                        "{tab.title}"
34                    }
35                }
36            }
37
38            // Tab content - cleaner without heavy background
39            div { class: "p-4 bg-base-200/50 rounded-lg border border-base-content/5",
40                if let Some(tab) = props.tabs.tabs.get(active_tab()) {
41                    TabContent { content: tab.content.clone() }
42                }
43            }
44        }
45    }
46}
47
48/// Props for TabContent.
49#[derive(Props, Clone, PartialEq)]
50struct TabContentProps {
51    content: Vec<DocNode>,
52}
53
54/// Individual tab content renderer.
55#[component]
56fn TabContent(props: TabContentProps) -> Element {
57    rsx! {
58        div {
59            class: "doc-tab-content",
60            for (i, node) in props.content.iter().enumerate() {
61                DocNodeRenderer { key: "{i}", node: node.clone() }
62            }
63        }
64    }
65}
dioxus_mdx/components/tabs.rs

dioxus_mdx/components/
tabs.rs
