Skip to main content

orbital_base_components/grid/
base.rs

1use leptos::{context::Provider, prelude::*};
2
3use super::injection::GridInjection;
4
5#[component]
6pub fn BaseGrid(
7    #[prop(optional, into)] class: MaybeProp<String>,
8    #[prop(default = 1u16.into(), into)] cols: Signal<u16>,
9    #[prop(optional, into)] x_gap: Signal<u16>,
10    #[prop(optional, into)] y_gap: Signal<u16>,
11    children: Children,
12) -> impl IntoView {
13    let style = Memo::new(move |_| {
14        let mut style = String::from("display: grid;");
15        style.push_str(&format!(
16            "grid-template-columns: repeat({}, minmax(0px, 1fr));",
17            cols.get()
18        ));
19        style.push_str(&format!("grid-gap: {}px {}px;", y_gap.get(), x_gap.get()));
20        style
21    });
22
23    view! {
24        <Provider value=GridInjection::new(x_gap)>
25            <div
26                class=move || {
27                    let extra = class.get().unwrap_or_default();
28                    if extra.is_empty() {
29                        "orbital-grid".to_string()
30                    } else {
31                        format!("orbital-grid {extra}")
32                    }
33                }
34                style=move || style.get()
35            >
36                {children()}
37            </div>
38        </Provider>
39    }
40}