Dashboard button #25

Merged
meraghon merged 8 commits from feat/dashboard-button into main 2025-12-05 13:35:07 +00:00
Showing only changes of commit bc00fa4af5 - Show all commits
+29 -9
View File
@@ -1,10 +1,28 @@
use leptos::prelude::*; use leptos::prelude::*;
BobdaFett commented 2025-11-27 21:22:23 +00:00 (Migrated from github.com)
Review

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.

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.
BobdaFett commented 2025-11-27 21:23:30 +00:00 (Migrated from github.com)
Review

Setting up the #[prop] the right way above should mean that you just print the string value here, no mapping needed.

Setting up the `#[prop]` the right way above should mean that you just print the string value here, no mapping needed.
BobdaFett commented 2025-11-27 21:26:03 +00:00 (Migrated from github.com)
Review

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 a None value, 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).

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 a `None` value, 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).
BobdaFett commented 2025-12-05 13:07:30 +00:00 (Migrated from github.com)
Review

These props should also have comments. They just have the /// comment one line above.

These props should also have comments. They just have the `/// comment` one line above.
BobdaFett commented 2025-12-05 13:08:03 +00:00 (Migrated from github.com)
Review

There should always be a space after the # in headers.

There should always be a space after the `#` in headers.
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(
BobdaFett commented 2025-11-27 21:28:40 +00:00 (Migrated from github.com)
Review

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.).

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>
} }