53 lines
1.6 KiB
Rust
53 lines
1.6 KiB
Rust
use leptos::prelude::*;
|
|
use leptos_router::hooks::use_navigate;
|
|
|
|
/// # Banner Component
|
|
///
|
|
/// This component displays a red banner at the top of the page with a title and a logo.
|
|
/// Clicking the logo will redirect a user to specified page, preferably a home page.
|
|
///
|
|
/// Example usage:
|
|
/// ```
|
|
/// <Banner
|
|
/// title="Test Page"
|
|
/// logo="medal.png"
|
|
/// path="/"
|
|
/// />
|
|
/// ```
|
|
#[component]
|
|
pub fn Banner(
|
|
/// The title of the banner.
|
|
#[prop(into)]
|
|
title: String,
|
|
/// The file path or URL of a logo displayed at the top left of the banner.
|
|
#[prop(into)]
|
|
logo: String,
|
|
/// The route that the navigates user to a page (home page).
|
|
#[prop(into, default = String::from("/"))]
|
|
path: String,
|
|
) -> impl IntoView {
|
|
let navigate = use_navigate();
|
|
|
|
let on_click = move |_| navigate(&path, Default::default());
|
|
|
|
view! {
|
|
<div class="mx-auto">
|
|
<div class="bg-red-900 shadow-lg shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.3),0_4px_6px_-1px_rgba(127,29,29,0.3),0_2px_4px_-1px_rgba(127,29,29,0.2)]">
|
|
<div class="flex items-center gap-4 p-6">
|
|
<div class="flex-shrink-0">
|
|
<img
|
|
src=logo.clone()
|
|
class="h-10 w-10 cursor-pointer"
|
|
alt="icon"
|
|
on:click=on_click
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h2 class="text-white text-2xl font-bold">{title.clone()}</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|