From e3ea13d07d7a186dba88e50b6226856b77ed168b Mon Sep 17 00:00:00 2001
From: meraghon <mdayton0521@gmail.com>
Date: Fri, 12 Dec 2025 12:13:41 -0500
Subject: [PATCH] Implement date element with struct

---
 src/components/date.rs | 74 ++++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/components/date.rs b/src/components/date.rs
index 9e57fff..8166a5a 100644
--- a/src/components/date.rs
+++ b/src/components/date.rs
@@ -1,5 +1,5 @@
+use crate::common::DateInfo;
 use leptos::prelude::*;
-
 /// # Date Component
 ///
 ///
@@ -9,15 +9,9 @@ use leptos::prelude::*;
 /// ```
 #[component]
 pub fn Date(
-    /// The main label displayed on the button.
+    /// Struct of title, date, and description
     #[prop(into)]
-    title: String,
-    /// The calendar date of the event
-    #[prop(into)]
-    date: String,
-    /// A brief explanatory text that describes the destination page.
-    #[prop(into)]
-    description: String,
+    important_dates: Vec<DateInfo>,
     /// The file path or URL of the icon displayed at the top of the button.
     #[prop(into)]
     icon: String,
@@ -25,35 +19,39 @@ pub fn Date(
     #[prop(into)]
     status: String,
 ) -> impl IntoView {
-    view! {
-        <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
-                   shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]">
-            <div class="flex-shrink-0 mt-0.5">
-                <img src={icon.clone()} class="h-4 w-4" alt="icon"/>
-            </div>
-            <div class="flex-1 min-w-0">
-                <div class="flex items-start justify-between">
-                    <div class="flex-1">
-                        <h3 class="font-semibold text-md text-base">
-                            {title.clone()}
-                        </h3>
-                        <h3 class="font-bold text-md text-base mt-1">
-                            {date.clone()}
-                        </h3>
-                        <p class="text-sm text-gray-600">
-                            {description.clone()}
-                        </p>
-                    </div>
-                    <div class="flex-shrink-0 ml-2">
-                     <span
-                        {/* Temporary status color & design*/}
-                        class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0">
-                            {status.clone()}
-                     </span>
+    important_dates.into_iter()
+            .map(|info: DateInfo| {
+                view! {
+                <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
+                       shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]">
+                <div class="flex-shrink-0 mt-0.5">
+                    <img src={icon.clone()} class="h-4 w-4" alt="icon"/>
+                </div>
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-start justify-between">
+                        <div class="flex-1">
+                            <h3 class="font-semibold text-md text-base">
+                                {info.title}
+                            </h3>
+                            <h3 class="font-bold text-md text-base mt-1">
+                                {info.date}
+                            </h3>
+                            <p class="text-sm text-gray-600">
+                                {info.description}
+                            </p>
+                        </div>
+                        <div class="flex-shrink-0 ml-2">
+                         <span
+                            {/* Temporary status color & design*/}
+                            class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0">
+                                {status.clone()}
+                         </span>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    }
+                </div>
+                }
+            })
+            .collect_view()
 }