diff --git a/app/src/main.rs b/app/src/main.rs index deb9364..ef61cf5 100644 --- a/app/src/main.rs +++ b/app/src/main.rs @@ -1,17 +1,6 @@ use dioxus::prelude::*; -#[derive(Debug, Clone, Routable, PartialEq)] -enum Route { - #[layout(Navbar)] - #[route("/")] - Home {}, - #[route("/blog/:id")] - Blog { id: i32 }, -} - -const FAVICON: Asset = asset!("/assets/favicon.ico"); const MAIN_CSS: Asset = asset!("/assets/main.css"); -const HEADER_SVG: Asset = asset!("/assets/header.svg"); fn main() { launch(App); @@ -20,101 +9,7 @@ fn main() { #[component] fn App() -> Element { rsx! { - document::Link { rel: "icon", href: FAVICON } document::Link { rel: "stylesheet", href: MAIN_CSS } - Router:: {} + "Hello world" } -} - -#[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 {} - } -} - -/// Blog page -#[component] -pub fn Blog(id: i32) -> Element { - rsx! { - div { id: "blog", - - // Content - h1 { "This is blog #{id}!" } - p { - "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." - } - - // Navigation links - Link { to: Route::Blog { id: id - 1 }, "Previous" } - span { " <---> " } - Link { to: Route::Blog { id: id + 1 }, "Next" } - } - } -} - -/// Shared navbar component. -#[component] -fn Navbar() -> Element { - rsx! { - div { id: "navbar", - Link { to: Route::Home {}, "Home" } - Link { to: Route::Blog { id: 1 }, "Blog" } - } - - Outlet:: {} - } -} - -/// 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(EchoServer)] -async fn echo_server(input: String) -> Result { - Ok(input) -} +} \ No newline at end of file