4 files changed, 108 insertions, 0 deletions
diff --git a/src/components/container.rs b/src/components/container.rs
new file mode 100644
index 0000000..cf7aa5a
--- /dev/null
+++ b/src/components/container.rs
@@ -0,0 +1,34 @@
+use leptos::{
+    IntoView, component,
+    prelude::{Children, ClassAttribute, ElementChild},
+    view,
+};
+use leptos_meta::Style;
+
+#[component]
+pub fn Container(header: impl IntoView, children: Children) -> impl IntoView {
+    view! {
+        <Style>
+            "
+            .rocie-container {
+                border-width: 0.1rem;
+                border-style: solid;
+                border-color: gray;
+                border-radius: 15%;
+
+                padding: 0.2rem;
+
+                text-align: left;
+            }
+            .rocie-container-header {
+                font-size: 1.5rem;
+            }
+            "
+        </Style>
+
+        <div class="rocie-container">
+            <p class="rocie-container-header">{header}</p>
+            {children()}
+        </div>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 8b13789..85f9671 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1 +1,6 @@
+// Generic
+pub mod container;
 
+// Specific
+pub mod product_overview;
+pub mod side_header;
diff --git a/src/components/product_overview.rs b/src/components/product_overview.rs
new file mode 100644
index 0000000..4e95335
--- /dev/null
+++ b/src/components/product_overview.rs
@@ -0,0 +1,47 @@
+use std::sync::Arc;
+
+use leptos::{
+    IntoView, component,
+    prelude::{ElementChild, Set, signal},
+    task::spawn_local,
+    view,
+};
+use rocie_client::apis::{api_get_product_api::products, configuration::Configuration};
+
+use crate::components::container::Container;
+
+#[component]
+pub fn ProductOverview(config: Arc<Configuration>) -> impl IntoView {
+    let (read_status, write_status) = signal("Loading..".to_owned());
+
+    {
+        let local_config = Arc::clone(&config);
+
+        spawn_local(async move {
+            let products = products(&local_config).await;
+
+            write_status.set(
+                products
+                    .as_ref()
+                    .map(move |products| {
+                        let products_num = products.len();
+                        let plural_s = if products_num == 1 { "" } else { "s" };
+                        let products_value = 2;
+                        let products_currency = "EUR";
+                        format!(
+                            "You have {products_num} product{plural_s} \
+                         in stock with a value \
+                         of {products_value} {products_currency}.",
+                        )
+                    })
+                    .unwrap(),
+            );
+        });
+    }
+
+    view! {
+        <Container header="Inventory">
+            <p>{read_status}</p>
+        </Container>
+    }
+}
diff --git a/src/components/side_header.rs b/src/components/side_header.rs
new file mode 100644
index 0000000..9cd6777
--- /dev/null
+++ b/src/components/side_header.rs
@@ -0,0 +1,22 @@
+use leptos::prelude::{AddAnyAttr, ElementChild, IntoView, StyleAttribute, component, view};
+use leptos_router::{NavigateOptions, hooks::use_navigate};
+use thaw::{Flex, FlexJustify, LayoutHeader};
+
+#[component]
+pub fn SiteHeader() -> impl IntoView {
+    let navigate = use_navigate();
+
+    view! {
+        <LayoutHeader
+            attr:style="padding: 20px;"
+            on:click=move |_| {
+                navigate("/", NavigateOptions::default());
+            }
+        >
+            <Flex justify=FlexJustify::SpaceAround>
+                <img src="/logo.svg" style="width: 36px" />
+                <h3>"Rocie"</h3>
+            </Flex>
+        </LayoutHeader>
+    }
+}