diff --git a/Cargo.toml b/Cargo.toml index a3dafd1..fda9f70 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -12,6 +12,7 @@ categories = ["gui", "wasm", "web-programming"] # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html [dependencies] yew = { version="0.21", features=["csr"] } +yew-router = "0.18" web-sys = { version = "0.3", features = ["Document", "HtmlElement", "Window"] } gloo-utils = "0.1" gloo-storage = "0.2" diff --git a/src/app.rs b/src/app.rs index 3c91001..18b3bc0 100644 --- a/src/app.rs +++ b/src/app.rs @@ -1,7 +1,9 @@ use yew::prelude::*; +use yew_router::prelude::*; use gloo_utils::document; use gloo_storage::{LocalStorage, Storage}; use serde::{Deserialize, Serialize}; +use crate::home::HomePage; use crate::kanban::KanbanBoard; #[derive(Debug, PartialEq, Clone, Copy, Serialize, Deserialize)] @@ -19,6 +21,25 @@ impl Theme { } } +#[derive(Clone, Routable, PartialEq)] +enum Route { + #[at("/")] + Home, + #[at("/kanban")] + Kanban, + #[not_found] + #[at("/404")] + NotFound, +} + +fn switch(routes: Route) -> Html { + match routes { + Route::Home => html! { }, + Route::Kanban => html! { }, + Route::NotFound => html! {

{ "404 - Page not found" }

}, + } +} + #[function_component(App)] pub fn app() -> Html { let theme = use_state(|| { @@ -42,19 +63,26 @@ pub fn app() -> Html { let navbar_class = if *theme == Theme::Dark { "navbar navbar-expand-lg navbar-dark" } else { "navbar navbar-expand-lg navbar-light" }; html! { - <> + - - + render={switch} /> + } } diff --git a/src/home.rs b/src/home.rs new file mode 100644 index 0000000..d6fe868 --- /dev/null +++ b/src/home.rs @@ -0,0 +1,94 @@ +use yew::prelude::*; + +#[function_component(HomePage)] +pub fn home_page() -> Html { + html! { + <> +
+
+
+
+

{"🚀 Welcome to Yew Bootstrap!"}

+

{"Experience the power of Rust and WebAssembly with this modern Yew application featuring Bootstrap 5 integration, responsive design, and seamless dark mode switching."}

+
+ + +
+
+
+
+
+ +
+
+
+
+
+
+ +
+

{"⚡ Fast Performance"}

+

{"Built with Rust and WebAssembly for blazing fast performance. Experience near-native speed in your web applications."}

+
+
+
+
+
+
+
+ +
+

{"🛡️ Type Safety"}

+

{"Rust's powerful type system ensures memory safety and prevents common programming errors at compile time."}

+
+
+
+
+
+
+
+ +
+

{"📱 Responsive Design"}

+

{"Fully responsive design that works perfectly on desktop, tablet, and mobile devices with Bootstrap 5."}

+
+
+
+
+
+ +
+
+
+
+

{"🎨 Modern UI Components"}

+

{"This application showcases modern UI patterns with smooth theme transitions, interactive components, and beautiful typography."}

+
    +
  • {"Dark/Light theme switching"}
    • +
  • {"Responsive navigation"}
    • +
  • {"Bootstrap 5 integration"}
    • +
  • {"Custom CSS properties"}
    • +
  • {"Kanban board with rich content"}
    • +
+
+
+
+ +
+
+
+
+
+ + + + } +} \ No newline at end of file diff --git a/src/main.rs b/src/main.rs index 114720d..e899a91 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,4 +1,5 @@ mod app; +mod home; mod kanban; use app::App;