src/components/date.rs

@@ -1,5 +1,5 @@
-use crate::common::{DateInfo, DateRange};
+use crate::common::{DateInfo, DateRange, DateStatus};
-use leptos::either::Either;
+use leptos::either::{Either, EitherOf4};
 use leptos::prelude::*;
 /// # Date Component
 ///
@@ -20,6 +20,34 @@ fn render_dates(dates: DateRange) -> impl IntoView {
     }
 }
 
+fn render_status(status: DateStatus) -> impl IntoView {
+    match status {
+        DateStatus::Upcoming => EitherOf4::A(view! {
+         <span
+            class="inline-flex items-center justify-center rounded-md border border-yellow-100 bg-yellow-100 px-2 py-0.5 text-xs text-yellow-800 font-medium w-fit whitespace-nowrap shrink-0">
+                Upcoming
+         </span>
+        }),
+        DateStatus::Open => EitherOf4::B(view! {
+         <span
+            class="inline-flex items-center justify-center rounded-md border border-green-100 bg-green-100 px-2 py-0.5 text-xs text-green-800 font-medium w-fit whitespace-nowrap shrink-0">
+                Open
+         </span>
+        }),
+        DateStatus::Deadline => EitherOf4::C(view! {
+        <span
+            class="inline-flex items-center justify-center rounded-md border border-red-900 bg-red-900 px-2 py-0.5 text-xs text-white font-medium w-fit whitespace-nowrap shrink-0">
+                Deadline
+         </span>
+        }),
+        DateStatus::Closed => EitherOf4::D(view! {
+             <span
+                class="inline-flex items-center justify-center rounded-md border border-red-50 bg-red-100 px-2 py-0.5 text-xs text-red-800 font-medium w-fit whitespace-nowrap shrink-0">
+                    Closed
+             </span>
+        }),
+    }
+}
 #[component]
 pub fn Date(
     /// Struct of title, date, and description
@@ -28,11 +56,9 @@ pub fn Date(
     /// The file path or URL of the icon displayed at the top of the button.
     #[prop(into)]
     icon: String,
-    /// The status of the event (open, upcoming, deadline...)
-    #[prop(into)]
-    status: String,
 ) -> impl IntoView {
-    important_dates.into_iter()
+    important_dates
+        .into_iter()
         .map(|info: DateInfo| {
             view! {
             <div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3
@@ -55,11 +81,7 @@ pub fn Date(
                         </p>
                     </div>
                     <div class="flex-shrink-0 ml-2">
-                         <span
+                        {render_status(info.status)}
-                            {/* 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>