Dioxus init

src/main.rs

@@ -1,3 +1,103 @@
+use dioxus::prelude::*;
+
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(Navbar)]
+    #[route("/")]
+    Home {},
+}
+
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+const MAIN_CSS: Asset = asset!("/assets/main.css");
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
+
 fn main() {
-    println!("Hello, world!");
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    rsx! {
+        document::Link { rel: "icon", href: FAVICON }
+        document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS }
+        Router::<Route> {}
+    }
+}
+
+#[component]
+pub fn Hero() -> Element {
+    rsx! {
+        div {
+            id: "hero",
+            img { src: HEADER_SVG, id: "header" }
+            div { id: "links",
+                a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
+                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
+                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
+                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
+                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
+                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
+            }
+        }
+    }
+}
+
+/// Home page
+#[component]
+fn Home() -> Element {
+    rsx! {
+        Hero {}
+        Echo {}
+    }
+}
+
+/// Shared navbar component.
+#[component]
+fn Navbar() -> Element {
+    rsx! {
+        div {
+            id: "navbar",
+            Link {
+                to: Route::Home {},
+                "Home"
+            }
+        }
+
+        Outlet::<Route> {}
+    }
+}
+
+/// Echo component that demonstrates fullstack server functions.
+#[component]
+fn Echo() -> Element {
+    let mut response = use_signal(|| String::new());
+
+    rsx! {
+        div {
+            id: "echo",
+            h4 { "ServerFn Echo" }
+            input {
+                placeholder: "Type here to echo...",
+                oninput:  move |event| async move {
+                    let data = echo_server(event.value()).await.unwrap();
+                    response.set(data);
+                },
+            }
+
+            if !response().is_empty() {
+                p {
+                    "Server echoed: "
+                    i { "{response}" }
+                }
+            }
+        }
+    }
+}
+
+/// Echo the user input on the server.
+#[server]
+async fn echo_server(input: String) -> Result<String, ServerFnError> {
+    Ok(input)
 }