flams_web_utils/components/
block.rs

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