From 63e2395caf4ae93ebde96d97e12fc946af1e9ac9 Mon Sep 17 00:00:00 2001 From: Ashelyn Rose Date: Sat, 22 Mar 2025 14:51:36 -0600 Subject: Component styles and hot-reloading --- src/components/app.rs | 17 +++++++++-------- src/components/layout/layout.module.css | 34 +++++++++++++++++++++++++++++++++ src/components/layout/mod.rs | 26 +++++++++++++++++++++++++ src/components/mod.rs | 2 ++ 4 files changed, 71 insertions(+), 8 deletions(-) create mode 100644 src/components/layout/layout.module.css create mode 100644 src/components/layout/mod.rs (limited to 'src') diff --git a/src/components/app.rs b/src/components/app.rs index 0a5ed80..7e2676a 100644 --- a/src/components/app.rs +++ b/src/components/app.rs @@ -1,10 +1,11 @@ use leptos::prelude::*; use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title}; use leptos_router::{ - components::{Route, Router, Routes}, - StaticSegment, + components::{ParentRoute, Route, Router, Routes}, path, StaticSegment }; +use crate::components::layout::Layout; + pub fn shell(options: LeptosOptions) -> impl IntoView { view! { @@ -38,17 +39,17 @@ pub fn App() -> impl IntoView { // content for this welcome page -
- - - -
+ + + + + } } /// Renders the home page of your application. -#[island] +#[component] fn HomePage() -> impl IntoView { // Creates a reactive value to update the button let count = RwSignal::new(0); diff --git a/src/components/layout/layout.module.css b/src/components/layout/layout.module.css new file mode 100644 index 0000000..5b9ccc2 --- /dev/null +++ b/src/components/layout/layout.module.css @@ -0,0 +1,34 @@ +main.layout { + min-height: 100vh; + display: grid; + max-width: 1000px; + margin: 0 auto; + grid-template-columns: 200px 1fr; + grid-template-rows: 200px 1fr 100px auto; +} + +.layout header { + display: flex; + grid-row: 1 / 2; + grid-column: 1 / 3; +} + +.layout nav { + grid-row: 2 / 3; + grid-column: 1 / 2; +} + +.layout article { + grid-row: 2 / 3; + grid-column: 2 / 3; +} + +.layout footer { + grid-column: 1 / 3; + grid-row: 3 / 4; +} + +.layout::after { + grid-column: 1 / 3; + grid-row: 4 / 5; +} diff --git a/src/components/layout/mod.rs b/src/components/layout/mod.rs new file mode 100644 index 0000000..6ec37da --- /dev/null +++ b/src/components/layout/mod.rs @@ -0,0 +1,26 @@ +use leptos::prelude::*; +use leptos::component; +use leptos_router::components::Outlet; + +stylance::import_crate_style!(styles, "src/components/layout/layout.module.css"); + +#[component] +pub fn Layout() -> impl IntoView { + view! { +
+
+

Site Title

+
+ +
+

Article

+ +
+ +
+ } +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 20df27e..62ca08a 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,3 +1,5 @@ +pub mod layout; + pub mod app; pub use app::App; -- cgit 1.4.1