Implement date element with struct

This commit is contained in:
meraghon committed 2025-12-12 12:13:41 -05:00
1 parent 7abb1c369f
commit e3ea13d07d
1 file changed
+10 -12
+10 -12
View File
@@ -1,5 +1,5 @@
use crate::common::DateInfo;
use leptos::prelude::*; use leptos::prelude::*;
/// # Date Component /// # Date Component
/// ///
/// ///
@@ -9,15 +9,9 @@ use leptos::prelude::*;
/// ``` /// ```
#[component] #[component]
pub fn Date( pub fn Date(
/// The main label displayed on the button. /// Struct of title, date, and description
#[prop(into)] #[prop(into)]
title: String, important_dates: Vec<DateInfo>,
/// The calendar date of the event
#[prop(into)]
date: String,
/// A brief explanatory text that describes the destination page.
#[prop(into)]
description: String,
/// The file path or URL of the icon displayed at the top of the button. /// The file path or URL of the icon displayed at the top of the button.
#[prop(into)] #[prop(into)]
icon: String, icon: String,
@@ -25,6 +19,8 @@ pub fn Date(
#[prop(into)] #[prop(into)]
status: String, status: String,
) -> impl IntoView { ) -> impl IntoView {
important_dates.into_iter()
.map(|info: DateInfo| {
view! { view! {
<div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3 <div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3
hover:bg-gray-100 transition w-full text-left hover:bg-gray-100 transition w-full text-left
@@ -36,13 +32,13 @@ pub fn Date(
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div class="flex-1"> <div class="flex-1">
<h3 class="font-semibold text-md text-base"> <h3 class="font-semibold text-md text-base">
{title.clone()} {info.title}
</h3> </h3>
<h3 class="font-bold text-md text-base mt-1"> <h3 class="font-bold text-md text-base mt-1">
{date.clone()} {info.date}
</h3> </h3>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
{description.clone()} {info.description}
</p> </p>
</div> </div>
<div class="flex-shrink-0 ml-2"> <div class="flex-shrink-0 ml-2">
@@ -56,4 +52,6 @@ pub fn Date(
</div> </div>
</div> </div>
} }
})
.collect_view()
} }