tallyweb_components/
progressbar.rs

1use leptos::*;
2
3#[component]
4pub fn Progressbar<F, C>(
5    progress: F,
6    color: C,
7    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
8    children: ChildrenFn,
9) -> impl IntoView
10where
11    F: Fn() -> f64 + Copy + 'static,
12    C: Fn() -> &'static str + Copy + 'static,
13{
14    view! {
15        <progress-bar
16            {..attrs}
17            style:display="flex"
18            style:justify-content="center"
19            style:align-items="center"
20        >
21            <div
22                style:font-size="1.4rem"
23                style="
24                    padding: 0px 12px;
25                    margin: auto;"
26                    .to_string()
27            >
28                {children()}
29            </div>
30            <through-bar style:width="100%" style:min-height="8px">
31                <Show
32                    when=move || { progress() > 0.0 }
33                    fallback=move || {
34                        view! {
35                            <color-bar style:display="block" style:min-height="8px"></color-bar>
36                        }
37                    }
38                >
39
40                    <div>
41                        <color-bar style=move || {
42                            "display: block;".to_string() + "min-height: 8px;"
43                                + format!("background: {};", color()).as_str()
44                                + format!("width: max({}%, 2px);", progress() * 100.0).as_str()
45                        }></color-bar>
46                    </div>
47
48                </Show>
49            </through-bar>
50        </progress-bar>
51    }
52}