feat(treewide): Switch to tailwindcss and add more components

1 files changed, 32 insertions, 39 deletions

diff --git a/src/components/product_overview.rs b/src/components/product_overview.rs
index 4e95335..ae2eaf2 100644
--- a/src/components/product_overview.rs
+++ b/src/components/product_overview.rs
@@ -1,47 +1,40 @@
-use std::sync::Arc;
+use leptos::{IntoView, component, view};
 
-use leptos::{
-    IntoView, component,
-    prelude::{ElementChild, Set, signal},
-    task::spawn_local,
-    view,
+use crate::{
+    api::get_products,
+    components::{async_fetch::AsyncFetch, container::Container, icon_p::IconP},
 };
-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(),
-            );
-        });
-    }
-
+pub fn ProductOverview() -> impl IntoView {
     view! {
-        <Container header="Inventory">
-            <p>{read_status}</p>
+        <Container
+            header="Inventory"
+            buttons=vec![
+                (view! { <IconP icon=icondata_io::IoClipboardOutline text="Inventory" /> }, "inventory"),
+                (view! { <IconP icon=icondata_io::IoPricetags text="Consume" /> }, "consume"),
+                (view! { <IconP icon=icondata_io::IoStorefront text="Buy" /> }, "buy"),
+            ]
+        >
+            {AsyncFetch!(
+                fetcher = {get_products()}
+                producer = |products| {
+                  let products_num = products.len();
+                  let plural_s = if products_num == 1 { "" } else { "s" };
+                  let products_value = 2;
+                  let products_currency = "EUR";
+
+                  view! {
+                      <p>
+                          {format!(
+                              "You have {products_num} product{plural_s} \
+                                   in stock with a value \
+                                   of {products_value} {products_currency}.",
+                          )}
+                      </p>
+                  }
+            }
+            )}
         </Container>
     }
 }