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

1 files changed, 55 insertions, 0 deletions

diff --git a/src/components/inventory.rs b/src/components/inventory.rs
new file mode 100644
index 0000000..5855b33
--- /dev/null
+++ b/src/components/inventory.rs
@@ -0,0 +1,55 @@
+use leptos::{
+    IntoView, component,
+    prelude::{ClassAttribute, ElementChild},
+    view,
+};
+
+use crate::{
+    api::{get_full_product_by_id, get_products},
+    components::{async_fetch::AsyncFetch, site_header::SiteHeader},
+};
+
+#[component]
+pub fn Inventory() -> impl IntoView {
+    view! {
+        <SiteHeader logo=icondata_io::IoArrowBack back_location="/" name="Inventory" />
+
+        <ul class="flex flex-col p-2 m-2">
+            {
+                AsyncFetch! {
+                    fetcher = {get_products()}
+                    producer = |products| {
+                        products
+                         .into_iter()
+                         .map(|product| {
+                            view! {
+                                {AsyncFetch! {
+                                    fetcher = {get_full_product_by_id(product.id)}
+                                    producer = |(product, amount, unit)| {
+                                      view! {
+                                          <ul class="my-3">
+                                              <li class="m-2">{product.name}</li>
+                                              <li class="m-2">
+                                                  <span class="bg-gray-200 p-1 px-2 rounded-lg">
+                                                      {
+                                                        format!(
+                                                            "{} {}",
+                                                            amount.amount.value,
+                                                            unit.short_name
+                                                            )
+                                                        }
+                                                  </span>
+                                              </li>
+                                          </ul>
+                                      }
+                                    }
+                                }}
+                            }
+                        })
+                        .collect::<Vec<_>>()
+                    }
+                }
+            }
+        </ul>
+    }
+}