mod components; mod pages; pub mod state; pub mod util; use components::messages::{Messages, Messenger}; use pages::{EventsPage, UsersPage}; use state::{Events, Users}; use sycamore::prelude::*; use sycamore_router::{HistoryIntegration, Route, Router}; #[derive(Route)] enum AppRoutes { #[to("/")] Home, #[to("/users")] Users, #[to("/events")] Events, #[not_found] NotFound, } #[derive(Clone, Debug, PartialEq)] pub struct Page { name: String, target: String, } #[derive(Prop)] pub struct NavbarProps<'a, G: Html> { children: Children<'a, G>, pages: Vec, } #[component] pub fn Navbar<'a, G: Html>(cx: Scope<'a>, props: NavbarProps<'a, G>) -> View { let children = props.children.call(cx); view! { cx, nav { (View::new_fragment(props.pages.iter().cloned().enumerate().map(|(_i, page)| { view! { cx, a(href=page.target) { (page.name) } } }).collect())) (children) } } } fn main() { console_log::init_with_level(log::Level::Debug).unwrap(); let pages = vec![ Page { target: "/".into(), name: "Home".into(), }, Page { target: "/users".into(), name: "Users".into(), }, Page { target: "/events".into(), name: "Events".into(), }, ]; sycamore::render(move |cx| { let messenger = Messenger::default(); provide_context(cx, messenger); let users = Users::default(); provide_context(cx, users); let events = Events::default(); provide_context(cx, events); /* let messages = use_context::(cx); spawn_local_scoped(cx, async move { TimeoutFuture::new(1000).await; messages.add_message(Message::new( "Hello there".into(), "This is a message".into(), )); TimeoutFuture::new(1000).await; messages.add_message(Message::new("Oh look!".into(), "Another message".into())); }); */ view! { cx, Router( integration=HistoryIntegration::new(), view=|cx, route: &ReadSignal| { view! { cx, Messages() header { Navbar(pages=pages) { } } main { (match route.get().as_ref() { AppRoutes::Home => view! { cx, "This is the home page" }, AppRoutes::Users => view! { cx, UsersPage }, AppRoutes::Events => view! { cx, EventsPage }, AppRoutes::NotFound => view! { cx, "404 Not Found" }, }) } } } ) } }); }