d3a47108af
Some checks failed
CI/CD Pipeline / Test Suite (push) Has been cancelled
CI/CD Pipeline / Security Audit (push) Has been cancelled
CI/CD Pipeline / Build Docker Image (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / Performance Benchmarks (push) Has been cancelled
CI/CD Pipeline / Cleanup (push) Has been cancelled
142 lines
4.7 KiB
Plaintext
142 lines
4.7 KiB
Plaintext
//! # Basic Layout Example
|
|
//!
|
|
//! Demonstrates the simplest way to use foundation components to create
|
|
//! a basic application layout with header, content, and footer.
|
|
|
|
use rustelo_components::{
|
|
navigation::{BrandHeader, Footer, NavMenu},
|
|
content::UnifiedContentCard,
|
|
ui::SpaLink,
|
|
};
|
|
use leptos::*;
|
|
|
|
/// Basic layout using foundation components directly
|
|
#[component]
|
|
pub fn BasicLayout() -> impl IntoView {
|
|
view! {
|
|
<div class="min-h-screen flex flex-col">
|
|
// Header with navigation
|
|
<BrandHeader
|
|
brand_name="My Rustelo App"
|
|
logo_url="/logo.svg"
|
|
class="shadow-sm"
|
|
>
|
|
<NavMenu orientation="horizontal">
|
|
<SpaLink href="/" active_class="text-blue-600">
|
|
"Home"
|
|
</SpaLink>
|
|
<SpaLink href="/about" active_class="text-blue-600">
|
|
"About"
|
|
</SpaLink>
|
|
<SpaLink href="/contact" active_class="text-blue-600">
|
|
"Contact"
|
|
</SpaLink>
|
|
</NavMenu>
|
|
</BrandHeader>
|
|
|
|
// Main content area
|
|
<main class="flex-1 container mx-auto px-4 py-8">
|
|
<UnifiedContentCard
|
|
title="Welcome to Rustelo"
|
|
subtitle="A modern web framework for Rust"
|
|
>
|
|
<p class="mb-4">
|
|
"This is a basic layout example using foundation components. "
|
|
"The header, navigation, content card, and footer are all "
|
|
"provided by the components foundation library."
|
|
</p>
|
|
|
|
<div class="flex gap-4">
|
|
<SpaLink href="/docs" class="btn btn-primary">
|
|
"Documentation"
|
|
</SpaLink>
|
|
<SpaLink href="/examples" class="btn btn-secondary">
|
|
"More Examples"
|
|
</SpaLink>
|
|
</div>
|
|
</UnifiedContentCard>
|
|
|
|
// Additional content sections
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
|
|
<UnifiedContentCard
|
|
title="Fast Development"
|
|
image_url="/features/speed.svg"
|
|
>
|
|
<p>"Build web applications quickly with pre-built components."</p>
|
|
</UnifiedContentCard>
|
|
|
|
<UnifiedContentCard
|
|
title="Type Safety"
|
|
image_url="/features/safety.svg"
|
|
>
|
|
<p>"Leverage Rust's type system for reliable web applications."</p>
|
|
</UnifiedContentCard>
|
|
|
|
<UnifiedContentCard
|
|
title="Modern Stack"
|
|
image_url="/features/modern.svg"
|
|
>
|
|
<p>"Built with Leptos, WebAssembly, and modern web standards."</p>
|
|
</UnifiedContentCard>
|
|
</div>
|
|
</main>
|
|
|
|
// Footer
|
|
<Footer copyright="© 2024 My Company">
|
|
<div class="flex space-x-4">
|
|
<SpaLink href="/privacy" class="text-gray-600 hover:text-gray-800">
|
|
"Privacy Policy"
|
|
</SpaLink>
|
|
<SpaLink href="/terms" class="text-gray-600 hover:text-gray-800">
|
|
"Terms of Service"
|
|
</SpaLink>
|
|
<SpaLink href="/support" class="text-gray-600 hover:text-gray-800">
|
|
"Support"
|
|
</SpaLink>
|
|
</div>
|
|
</Footer>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// Example of using the layout in a full app
|
|
#[component]
|
|
pub fn App() -> impl IntoView {
|
|
view! {
|
|
<BasicLayout />
|
|
}
|
|
}
|
|
|
|
/*
|
|
To use this example:
|
|
|
|
1. Add to your Cargo.toml:
|
|
```toml
|
|
[dependencies]
|
|
components = { path = "path/to/components" }
|
|
leptos = { version = "0.8", features = ["csr"] }
|
|
```
|
|
|
|
2. In your main.rs:
|
|
```rust
|
|
use basic_layout::App;
|
|
|
|
fn main() {
|
|
mount_to_body(|| view! { <App /> });
|
|
}
|
|
```
|
|
|
|
This provides:
|
|
- ✅ Responsive header with navigation
|
|
- ✅ Flexible main content area
|
|
- ✅ Reusable content cards
|
|
- ✅ SPA-aware navigation links
|
|
- ✅ Professional footer
|
|
|
|
The layout is:
|
|
- 📱 Mobile-responsive by default
|
|
- ♿ Accessible with proper ARIA attributes
|
|
- 🎨 Styled with utility classes (works with Tailwind CSS)
|
|
- 🔗 Uses SPA routing for fast navigation
|
|
- 🧩 Composable - easy to modify and extend
|
|
*/ |