1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


use dioxus::{prelude::*};
use dioxus::fermi::prelude::*;

static SELECTED_CONTENTS: Atom<String> = |_| "".to_string();

#[allow(non_snake_case)]
#[inline_props]
pub fn PfTabs<'a>(cx: Scope<'a>, children: Element<'a>) -> Element<'a> {
    let selected_contents = use_atom_state(&cx, SELECTED_CONTENTS);
    cx.render(rsx! {
        div { class: "pf-c-tabs",
            button { class: "pf-c-tabs__scroll-button", r#type: "button", disabled: "false", aria_hidden: "false", aria_label: "Scroll left",
                i { class: "fas fa-angle-left", aria_hidden: "true" }
            }
            ul { class: "pf-c-tabs__list",
                children
            }

        } 
        section {
            class: "pf-c-tab-content",
            role: "tabpanel",
            hidden: "false",
            span {
                dangerous_inner_html:"{selected_contents}",
            }

            
        }        
    }) 
}

#[allow(non_snake_case)]
#[inline_props]
pub fn PfTab<'a>(cx: Scope<'a>, title: &'a str, children: Element<'a>) -> Element {

    //I didn't know how to use children to `use_atom_state`, So I converted the element to a string
    let children_string = dioxus::ssr::render_lazy(rsx!{span{children}});
    
    let selected_contents = use_atom_state(&cx, SELECTED_CONTENTS);
    
    cx.render(rsx! {
        li { class: "pf-c-tabs__item",
            button { r#type: "button", class: "pf-c-tabs__link", onclick: move |_| {selected_contents.set(children_string.clone());}  ,  "{title}"
                span { class: "pf-c-tabs__item-text"}
            }
        }
    })
}