smart-house-web: фронт эссперименты

smart-house-web/frontend/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-dioxus = { version = "0.7", features = [] }
+dioxus = { version = "0.7", features = ["fullstack", "router"] }
 reqwest = { version = "0.13", features = ["json"] }
 serde = { version = "1.0", features = ["derive"] }
 
@@ -13,3 +13,4 @@ default = ["web"]
 web = ["dioxus/web"]
 desktop = ["dioxus/desktop"]
 mobile = ["dioxus/mobile"]
+server = ["dioxus/server"]

smart-house-web/frontend/src/components/favorites.rs

@@ -0,0 +1,6 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Favorites() -> Element {
+    rsx! { "favorites!" }
+}

smart-house-web/frontend/src/components/mod.rs

@@ -0,0 +1,7 @@
+mod favorites;
+mod nav;
+mod view;
+
+pub use favorites::*;
+pub use nav::*;
+pub use view::*;

smart-house-web/frontend/src/components/nav.rs

@@ -0,0 +1,15 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+#[component]
+pub fn NavBar() -> Element {
+    rsx! {
+        div { id: "title",
+            Link { to: Route::DogView,
+                h1 { "🌭 HotDog! " }
+            }
+            Link { to: Route::Favorites, id: "heart", "♥️" }
+        }
+        Outlet::<Route> {}
+    }
+}

smart-house-web/frontend/src/main.rs

@@ -1,8 +1,13 @@
 use dioxus::prelude::*;
 
+use crate::components::{Favorites, NavBar};
+
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 const MAIN_CSS: Asset = asset!("/assets/main.css");
 
+mod backend;
+mod components;
+
 fn main() {
     dioxus::launch(App);
 }
@@ -16,8 +21,7 @@ fn App() -> Element {
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
         document::Stylesheet { href: MAIN_CSS }
-        Title {  }
-        DogView {  }
+        Router::<Route> {  }
     }
 }
 
@@ -58,3 +62,13 @@ fn DogView() -> Element {
         }
     }
 }
+
+#[derive(Routable, Clone, PartialEq)]
+enum Route {
+    #[layout(NavBar)]
+    #[route("/")]
+    DogView,
+
+    #[route("/favorites")]
+    Favorites,
+}