flams_web_utils/components/
block.rs

1use ftml_dom::utils::css::inject_css;
2use leptos::prelude::*;
3
4use super::Header;
5
6#[slot]
7pub struct Footer {
8    children: Children,
9}
10#[slot]
11pub struct HeaderRight {
12    children: Children,
13}
14#[slot]
15pub struct HeaderLeft {
16    children: Children,
17}
18#[slot]
19pub struct Separator {
20    children: Children,
21}
22
23#[component]
24pub fn Block(
25    #[prop(optional)] header: Option<Header>,
26    #[prop(optional)] header_right: Option<HeaderRight>,
27    #[prop(optional)] header_left: Option<HeaderLeft>,
28    #[prop(optional)] footer: Option<Footer>,
29    #[prop(optional)] separator: Option<Separator>,
30    #[prop(optional)] show_separator: Option<bool>,
31    children: Children,
32) -> impl IntoView {
33    use thaw::{
34        Card, CardFooter, CardHeader, CardHeaderAction, CardHeaderDescription, CardHeaderProps,
35        CardPreview, Divider,
36    };
37    inject_css("flams-block", include_str!("block.css"));
38    let has_header = header.is_some() || header_right.is_some() || header_left.is_some();
39    let has_separator = separator.is_some()
40        || show_separator == Some(true)
41        || (show_separator.is_none() && has_header);
42    view! {
43        <Card class="flams-block-card">
44            {if has_header {
45                Some(CardHeader(CardHeaderProps{
46                    class:Option::<String>::None.into(),
47                    card_header_action:header_right.map(|c| CardHeaderAction{children:c.children}),
48                    card_header_description:header_left.map(|c| CardHeaderDescription{children:c.children}),
49                    children:header.map_or_else(
50                      || Box::new(|| view!(<span/>).into_any()) as Children,
51                      |c| c.children
52                    )
53                }))
54            } else {None}}
55            {if has_separator {
56                Some(separator.map_or_else(
57                  || view!(<div style="margin:5px;"><Divider/></div>),
58                  |c| view!(<div style="margin:5px;"><Divider>{(c.children)()}</Divider></div>)
59                ))
60            } else {None}}
61            <CardPreview class="flams-block-card-inner">
62              {children()}
63            </CardPreview>
64            {footer.map(|h| view!{
65                <CardFooter>{(h.children)()}</CardFooter>
66            })}
67        </Card>
68    }
69}
flams_web_utils/components/block.rs

flams_web_utils/components/
block.rs
