Reformat project

This commit is contained in:
Leonard Steppy 2025-02-21 10:49:50 +01:00
parent f9aae520e9
commit 1d760a2415

View File

@ -1,13 +1,12 @@
use dioxus::prelude::*; use dioxus::prelude::*;
#[derive(Debug, Clone, Routable, PartialEq)] #[derive(Debug, Clone, Routable, PartialEq)]
#[rustfmt::skip]
enum Route { enum Route {
#[layout(Navbar)] #[layout(Navbar)]
#[route("/")] #[route("/")]
Home {}, Home {},
#[route("/blog/:id")] #[route("/blog/:id")]
Blog { id: i32 }, Blog { id: i32 },
} }
const FAVICON: Asset = asset!("/assets/favicon.ico"); const FAVICON: Asset = asset!("/assets/favicon.ico");
@ -15,33 +14,34 @@ const MAIN_CSS: Asset = asset!("/assets/main.css");
const HEADER_SVG: Asset = asset!("/assets/header.svg"); const HEADER_SVG: Asset = asset!("/assets/header.svg");
fn main() { fn main() {
dioxus::launch(App); launch(App);
} }
#[component] #[component]
fn App() -> Element { fn App() -> Element {
rsx! { rsx! {
document::Link { rel: "icon", href: FAVICON } document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: MAIN_CSS }
Router::<Route> {} Router::<Route> {}
} }
} }
#[component] #[component]
pub fn Hero() -> Element { pub fn Hero() -> Element {
rsx! { rsx! {
div { div { id: "hero",
id: "hero", img { src: HEADER_SVG, id: "header" }
img { src: HEADER_SVG, id: "header" } div { id: "links",
div { id: "links", a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" } a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" } a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" } a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus",
a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" } "💫 VSCode Extension"
a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } }
} a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
} }
}
} }
} }
@ -49,8 +49,8 @@ pub fn Hero() -> Element {
#[component] #[component]
fn Home() -> Element { fn Home() -> Element {
rsx! { rsx! {
Hero {} Hero {}
Echo {} Echo {}
} }
} }
@ -58,24 +58,19 @@ fn Home() -> Element {
#[component] #[component]
pub fn Blog(id: i32) -> Element { pub fn Blog(id: i32) -> Element {
rsx! { rsx! {
div { div { id: "blog",
id: "blog",
// Content // Content
h1 { "This is blog #{id}!" } 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." } 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"
}
} }
// Navigation links
Link { to: Route::Blog { id: id - 1 }, "Previous" }
span { " <---> " }
Link { to: Route::Blog { id: id + 1 }, "Next" }
}
} }
} }
@ -83,19 +78,12 @@ pub fn Blog(id: i32) -> Element {
#[component] #[component]
fn Navbar() -> Element { fn Navbar() -> Element {
rsx! { rsx! {
div { div { id: "navbar",
id: "navbar", Link { to: Route::Home {}, "Home" }
Link { Link { to: Route::Blog { id: 1 }, "Blog" }
to: Route::Home {}, }
"Home"
}
Link {
to: Route::Blog { id: 1 },
"Blog"
}
}
Outlet::<Route> {} Outlet::<Route> {}
} }
} }
@ -105,24 +93,23 @@ fn Echo() -> Element {
let mut response = use_signal(|| String::new()); let mut response = use_signal(|| String::new());
rsx! { rsx! {
div { div { id: "echo",
id: "echo", h4 { "ServerFn Echo" }
h4 { "ServerFn Echo" } input {
input { placeholder: "Type here to echo...",
placeholder: "Type here to echo...", oninput: move |event| async move {
oninput: move |event| async move { let data = echo_server(event.value()).await.unwrap();
let data = echo_server(event.value()).await.unwrap(); response.set(data);
response.set(data); },
},
}
if !response().is_empty() {
p {
"Server echoed: "
i { "{response}" }
}
}
} }
if !response().is_empty() {
p {
"Server echoed: "
i { "{response}" }
}
}
}
} }
} }