...
This commit is contained in:
parent
7d3ddc12ed
commit
085ce51b0a
@ -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"
|
||||
|
||||
40
src/app.rs
40
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! { <HomePage /> },
|
||||
Route::Kanban => html! { <KanbanBoard /> },
|
||||
Route::NotFound => html! { <h1>{ "404 - Page not found" }</h1> },
|
||||
}
|
||||
}
|
||||
|
||||
#[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! {
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<nav class={navbar_class}>
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fw-bold" href="#">{"🦀 Yew Bootstrap App"}</a>
|
||||
<Link<Route> to={Route::Home} classes="navbar-brand fw-bold">
|
||||
{"🦀 Yew Bootstrap App"}
|
||||
</Link<Route>>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">
|
||||
<Link<Route> to={Route::Home} classes="nav-link">
|
||||
<i class="bi bi-house-fill me-1"></i>{"Home"}
|
||||
</a>
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<Link<Route> to={Route::Kanban} classes="nav-link">
|
||||
<i class="bi bi-kanban me-1"></i>{"Kanban"}
|
||||
</Link<Route>>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
@ -81,7 +109,7 @@ pub fn app() -> Html {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<KanbanBoard />
|
||||
</>
|
||||
<Switch<Route> render={switch} />
|
||||
</BrowserRouter>
|
||||
}
|
||||
}
|
||||
|
||||
94
src/home.rs
Normal file
94
src/home.rs
Normal file
@ -0,0 +1,94 @@
|
||||
use yew::prelude::*;
|
||||
|
||||
#[function_component(HomePage)]
|
||||
pub fn home_page() -> Html {
|
||||
html! {
|
||||
<>
|
||||
<div class="hero-section jumbotron">
|
||||
<div class="container py-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-4 fw-bold mb-4">{"🚀 Welcome to Yew Bootstrap!"}</h1>
|
||||
<p class="lead fs-5 mb-4">{"Experience the power of Rust and WebAssembly with this modern Yew application featuring Bootstrap 5 integration, responsive design, and seamless dark mode switching."}</p>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
|
||||
<button class="btn btn-primary btn-lg px-4 me-md-2" type="button">
|
||||
<i class="bi bi-rocket-takeoff me-2"></i>{"Get Started"}
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary btn-lg px-4" type="button">
|
||||
<i class="bi bi-github me-2"></i>{"View Source"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container my-5">
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary bg-gradient text-white rounded-3 mb-3 mx-auto" style="width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-lightning-charge fs-2"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{"⚡ Fast Performance"}</h3>
|
||||
<p class="card-text">{"Built with Rust and WebAssembly for blazing fast performance. Experience near-native speed in your web applications."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success bg-gradient text-white rounded-3 mb-3 mx-auto" style="width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-shield-check fs-2"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{"🛡️ Type Safety"}</h3>
|
||||
<p class="card-text">{"Rust's powerful type system ensures memory safety and prevents common programming errors at compile time."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info bg-gradient text-white rounded-3 mb-3 mx-auto" style="width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="bi bi-phone fs-2"></i>
|
||||
</div>
|
||||
<h3 class="card-title">{"📱 Responsive Design"}</h3>
|
||||
<p class="card-text">{"Fully responsive design that works perfectly on desktop, tablet, and mobile devices with Bootstrap 5."}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-body-secondary py-5">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="display-6 fw-bold mb-3">{"🎨 Modern UI Components"}</h2>
|
||||
<p class="lead">{"This application showcases modern UI patterns with smooth theme transitions, interactive components, and beautiful typography."}</p>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Dark/Light theme switching"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Responsive navigation"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Bootstrap 5 integration"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Custom CSS properties"}</li>
|
||||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>{"Kanban board with rich content"}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 text-center">
|
||||
<div class="p-4">
|
||||
<i class="bi bi-palette2 display-1 text-primary"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="bg-body-tertiary py-4 mt-5">
|
||||
<div class="container text-center">
|
||||
<p class="mb-0">{"Built with ❤️ using Yew, Rust, and Bootstrap 5"}</p>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
mod app;
|
||||
mod home;
|
||||
mod kanban;
|
||||
use app::App;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user