Dashboard button #25
@@ -1,10 +1,28 @@
|
|||||||
use leptos::prelude::*;
|
use leptos::prelude::*;
|
||||||
|
|
|||||||
use leptos_router::hooks::use_navigate;
|
use leptos_router::hooks::use_navigate;
|
||||||
|
|
||||||
|
/// #Dashboard Button Component
|
||||||
|
///
|
||||||
|
/// This component displays a large panel-like button that redirects a user to a specified page.
|
||||||
|
/// It's best used on a user dashboard, where multiple instances of the button are present.
|
||||||
|
/// It has a title, description, and icon
|
||||||
|
///
|
||||||
|
/// Example usage:
|
||||||
|
/// ```
|
||||||
|
/// <div class="p-6 space-y-4 max-w-1/3">
|
||||||
|
/// <DashboardButton
|
||||||
|
/// title="Home Page"
|
||||||
|
/// description="Navigate to Home Page"
|
||||||
|
/// icon="square-user.svg"
|
||||||
|
/// path="/"
|
||||||
|
/// />
|
||||||
|
/// </div>
|
||||||
|
/// ```
|
||||||
#[component]
|
#[component]
|
||||||
pub fn DashboardButton(
|
pub fn DashboardButton(
|
||||||
|
This whole component needs documentation - at least give a title to the component, a brief description, explain the props, and a usage example. This is included with other components that have been created, specifically the selection lists ( This whole component needs documentation - at least give a title to the component, a brief description, explain the props, and a usage example. This is included with other components that have been created, specifically the selection lists (`ChipsList`, `CheckboxList`, etc.).
|
|||||||
#[prop(into)] title: String,
|
#[prop(into)] title: String,
|
||||||
#[prop(into, optional)] description: Option<String>,
|
#[prop(into)] description: String,
|
||||||
#[prop(into, optional)] icon: Option<String>,
|
#[prop(into)] icon: String,
|
||||||
#[prop(into)] path: String,
|
#[prop(into)] path: String,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
let navigate = use_navigate();
|
let navigate = use_navigate();
|
||||||
@@ -20,13 +38,15 @@ pub fn DashboardButton(
|
|||||||
on:click=on_click>
|
on:click=on_click>
|
||||||
|
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
{icon.as_ref().map(|src| view! {
|
<img src={icon.clone()} class="h-8 w-8" alt="icon"/>
|
||||||
<img src={src.clone()} class="h-8 w-8" alt="icon"/>
|
<h3 class="font-semibold text-base">
|
||||||
})}
|
{title.clone()}
|
||||||
<h3 class="font-semibold text-base">{title.clone()}</h3>
|
</h3>
|
||||||
{description.as_ref().map(|d| view! {
|
|
||||||
<p class="text-sm text-gray-600 pt-6">{d.clone()}</p>
|
<p class="text-sm text-gray-600 pt-6">
|
||||||
})}
|
{description.clone()}
|
||||||
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user
These should not be Optional values. When we use
#[prop(optional), it just means that we either have a value, or the default value. For something like this (a String) that would mean we either have a specific value passed in or just the empty string.Setting up the
#[prop]the right way above should mean that you just print the string value here, no mapping needed.Depending on your desired behavior, leaving this as an
Option<String>might be fine. What I'd like to know is the mindset behind it - if this is aNonevalue, how are you handling it? Should this even be optional at all? Why?I'd recommend documenting this properly (refer to Leptos documentation for how to add doc comments to components).
These props should also have comments. They just have the
/// commentone line above.There should always be a space after the
#in headers.