update

src/page/item_detail.rs

@@ -1,4 +1,5 @@
 use dioxus::prelude::*;
+use dioxus_material_icons::MaterialIcon;
 
 use crate::{page::supply::SupplyPageParam, Route, TransactionCard};
 
@@ -13,14 +14,14 @@ pub fn ItemDetailPage(id: String) -> Element {
 
     rsx! {
         div {
-            class: "flex flex-col h-screen",
+            class: "p-4 flex flex-col h-screen",
 
             header {
-                class: "p-4 text-white text-lg font-bold",
+                class: "text-white text-lg font-bold",
                 {item.name.as_str()}
             }
             div {
-                class: "p-6 flex flex-col space-y-4",
+                class: "flex flex-col space-y-4",
                 div {
                     class: "flex items-start space-x-4",
                     if let Some(image) = &item.image {
@@ -38,6 +39,23 @@ pub fn ItemDetailPage(id: String) -> Element {
                     }
                 }
 
+                EventButton {
+                    icon: "pallet",
+                    title: "Supply",
+                    onclick: move |_| {
+        navigator().push(
+            Route::SupplyPage {
+                item: item.uuid.clone(),
+                param: SupplyPageParam {
+                    only_variants: None,
+                    force_price: None,
+                    force_origin: None,
+                },
+            }
+        );
+    }
+                 }
+
                 div {
                     class: "grid grid-cols-2 gap-4",
                     {item.variants.iter().map(|(key, variant)| {
@@ -72,22 +90,30 @@ pub fn ItemDetailPage(id: String) -> Element {
                 }
             }
 
-            button {
-                class: "fixed bottom-4 right-4 p-4 bg-green-500 text-white rounded-full shadow-lg",
-                onclick: move |_| {
-                    navigator().push(
-                        Route::SupplyPage {
-                            item: item.uuid.clone(),
-                            param: SupplyPageParam {
-                                only_variants: None,
-                                force_price: None,
-                                force_origin: None
-                             }
-                            }
-                        );
-                 },
-                "+"
-            }
+
         }
     }
 }
+
+#[component]
+pub fn EventButton(icon: String, title: String, onclick: EventHandler<MouseEvent>) -> Element {
+    rsx! {
+            button {
+        class: "\
+            flex items-center gap-2 px-3 py-1.5 rounded-md \
+            text-sm font-medium \
+            border border-neutral-300 dark:border-neutral-700 \
+            text-neutral-800 dark:text-neutral-200 \
+            bg-white dark:bg-neutral-900 \
+            hover:bg-neutral-100 dark:hover:bg-neutral-800 \
+            hover:shadow-sm \
+            transition-all duration-200 cursor-pointer w-fit",
+        onclick: onclick,
+        MaterialIcon {
+            name: icon,
+            size: 20
+        },
+        {title}
+    }
+        }
+}