<Inventory/> component, basic markup + styles, balance (with <Numput>)

src/components/inventory.rs

@@ -0,0 +1,36 @@
+use leptos::prelude::*;
+use reactive_stores::Field;
+use crate::{ components::numput::Numput, prelude::* };
+
+#[component]
+pub fn Inventory (
+    kind: InventoryKind,
+    inventory: Field<Inventory>,
+    balance: Field<Balance>
+) -> impl IntoView {
+    view! {
+        <section class="inventory">
+            <h3>{kind.to_string()}</h3>
+            <div class="balance">
+                <div title="PP (Platinum)" class="platinum">
+                    <Numput field=balance.platinum() />
+                </div>
+                <div title="GP (Gold)" class="gold">
+                    <Numput field=balance.gold() />
+                </div>
+                <div title="EP (Electrum)" class="electrum">
+                    <Numput field=balance.electrum() />
+                </div>
+                <div title="SP (Silver)" class="silver">
+                    <Numput field=balance.silver() />
+                </div>
+                <div title="CP (Copper)" class="copper">
+                    <Numput field=balance.copper() />
+                </div>
+            </div>
+            <div class="items">
+
+            </div>
+        </section>
+    }
+}

src/components/mod.rs

@@ -7,6 +7,7 @@ use crate::prelude::*;
 pub mod header;
 pub mod sidebar;
 pub mod nav;
+pub mod inventory;
 pub mod numput;
 
 #[component]
@@ -18,8 +19,22 @@ pub fn Character () -> impl IntoView {
 
 #[component]
 pub fn Inventories () -> impl IntoView {
+    let state = expect_context::<Context>();
+    let player = state.player();
+    let common = state.common();
+
+    let p_inv: Field<Inventory> = player.inventory().into();
+    let p_balance: Field<Balance> = player.balance().into();
+
+    let c_inv: Field<Inventory> = common.inventory().into();
+    let c_balance: Field<Balance> = common.balance().into();
+
+
     view! {
         <div class="inventories">
+            <inventory::Inventory kind=InventoryKind::Personal inventory=p_inv balance=p_balance />
+            <hr />
+            <inventory::Inventory kind=InventoryKind::Common inventory=c_inv balance=c_balance />
         </div>
     }
 }