use leptos::prelude::*; use leptos_meta::{ provide_meta_context, Stylesheet, Title }; use leptos_router::{ components::{ Route, Router, Routes }, StaticSegment, WildcardSegment, }; use crate::{ components::{ header::Header, nav::Nav, sidebar::Sidebar, Character, Inventories, Wiki }, prelude::* }; /// Root component of the app. /// /// Sets up meta context, creates the `Store` (mock data for now) /// and injects it as context, then renders the shell: header, sidebar, nav /// and the routed page. Routes: `/` character, `/inv` inventories, /// `/wiki` wiki; anything else falls to `NotFound`. #[component] pub fn App() -> impl IntoView { // Provides context that manages stylesheets, titles, meta tags, etc. provide_meta_context(); provide_context(Store::new(Dashboard::mock())); console_error_panic_hook::set_once(); view! { // injects a stylesheet into the document // id=leptos means cargo-leptos will hot-reload this stylesheet // sets the document title // content for this welcome page <Router> <div class="wrapper"> <Header /> <Sidebar /> <main> <Nav /> <Routes fallback=move || "Not found."> <Route path=StaticSegment("") view=Character/> <Route path=StaticSegment("inv") view=Inventories/> <Route path=StaticSegment("wiki") view=Wiki /> <Route path=WildcardSegment("any") view=NotFound/> </Routes> </main> </div> </Router> } } /// Renders the home page of your application. #[component] fn HomePage() -> impl IntoView { // Creates a reactive value to update the button let count = RwSignal::new(0); let on_click = move |_| *count.write() += 1; view! { <h1>"Welcome to Leptos!"</h1> <button on:click=on_click>"Click Me: " {count}</button> } } /// 404 - Not Found #[component] fn NotFound() -> impl IntoView { // set an HTTP status code 404 // this is feature gated because it can only be done during // initial server-side rendering // if you navigate to the 404 page subsequently, the status // code will not be set because there is not a new HTTP request // to the server #[cfg(feature = "ssr")] { // this can be done inline because it's synchronous // if it were async, we'd use a server function let resp = expect_context::<leptos_actix::ResponseOptions>(); resp.set_status(actix_web::http::StatusCode::NOT_FOUND); } view! { <h1>"Not Found"</h1> } }