Cleanup app

This commit is contained in:
Leonard Steppy 2025-02-21 11:45:29 +01:00
parent 7b28c580f4
commit e0a227486b

View File

@ -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::<Route> {}
"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::<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(EchoServer)]
async fn echo_server(input: String) -> Result<String, ServerFnError> {
Ok(input)
}
}