feat: Body component

crates/components/src/body.rs

@@ -0,0 +1,54 @@
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_hooks::{use_get_theme, BodyTheme};
+
+/// [`Body`] component properties.
+#[derive(Props)]
+pub struct BodyProps<'a> {
+    /// Inner children for the Body.
+    children: Element<'a>,
+    /// Padding for the Body.
+    #[props(default = "none".to_string(), into)]
+    padding: String,
+}
+
+/// `Body` component.
+///
+/// Usually just used one time and as a root component for all the app.
+///
+/// # Props
+/// See [`BodyProps`].
+///
+/// # Styling
+/// Inherits the [`BodyTheme`](freya_hooks::BodyTheme) theme.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app(cx: Scope) -> Element {
+///     render!(
+///         Body {
+///             label {
+///                 "Click this"
+///             }
+///         }
+///     )
+/// }
+/// ```
+///
+#[allow(non_snake_case)]
+pub fn Body<'a>(cx: Scope<'a, BodyProps<'a>>) -> Element {
+    let theme = use_get_theme(cx);
+    let BodyTheme { background, color } = theme.body;
+    let BodyProps { children, padding } = cx.props;
+
+    render!(rect {
+        width: "fill",
+        height: "fill",
+        color: "{color}",
+        background: "{background}",
+        padding: "{padding}",
+        children
+    })
+}

crates/components/src/lib.rs

@@ -2,6 +2,7 @@
 //! A collection of basic components to be used in Freya.
 
 mod accordion;
+mod body;
 mod button;
 mod canvas;
 mod cursor_area;
@@ -22,6 +23,7 @@ mod theme;
 mod tooltip;
 
 pub use accordion::*;
+pub use body::*;
 pub use button::*;
 pub use canvas::*;
 pub use cursor_area::*;

examples/switch_theme.rs

@@ -34,15 +34,18 @@ fn app(cx: Scope) -> Element {
     let is_enabled = if *enabled.get() { "Yes" } else { "No" };
 
     render!(
-        Switch {
-            enabled: *enabled.get(),
-            ontoggled: |_| {
-                enabled.set(!enabled.get());
+        Body {
+            padding: "20",
+            Switch {
+                enabled: *enabled.get(),
+                ontoggled: |_| {
+                    enabled.set(!enabled.get());
+                }
             }
+            label {
+                "Is enabled? {is_enabled}"
+            }
+            TheOtherSwitch { }
         }
-        label {
-            "Is enabled? {is_enabled}"
-        }
-        TheOtherSwitch { }
     )
 }