1use crate::icon::{Icon, IconKind};
2use dioxus::prelude::*;
3
4#[component]
5pub fn TabList(#[props(default)] class: String, children: Element) -> Element {
6 rsx! {
7 div {
8 class: "sd-tabs-list {class}",
9 {children}
10 }
11 }
12}
13
14#[component]
15pub fn Tab(
16 value: String,
17 active: Signal<String>,
18 #[props(default)] icon: Option<IconKind>,
19 #[props(default)] badge: Option<String>,
20 #[props(default)] class: String,
21 children: Element,
22) -> Element {
23 let is_active = *active.read() == value;
24 let target = value.clone();
25 let active_class = if is_active { "sd-tab--active" } else { "" };
26
27 rsx! {
28 button {
29 r#type: "button",
30 class: "sd-tab {active_class} {class}",
31 onclick: move |_| *active.write() = target.clone(),
32 if let Some(i) = icon {
33 span { class: "sd-tab__icon",
34 Icon { kind: i, size: 14 }
35 }
36 }
37 {children}
38 if let Some(b) = badge {
39 span { class: "sd-tab__badge", "{b}" }
40 }
41 }
42 }
43}
44
45#[component]
46pub fn TabPanel(
47 value: String,
48 active: Signal<String>,
49 #[props(default)] class: String,
50 children: Element,
51) -> Element {
52 if *active.read() != value {
53 return rsx! {};
54 }
55
56 rsx! {
57 div {
58 class: "sd-tab-panel {class}",
59 {children}
60 }
61 }
62}