r15-software-dev/scholarships-rs
1
0 Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 20 Wiki Activity

Implement date element with struct

Browse Source
This commit is contained in:
meraghon committed 2025-12-12 12:13:41 -05:00
1 parent 7abb1c369f
commit e3ea13d07d
1 file changed
+36 -38
Download Patch File Download Diff File Expand all files Collapse all files
src/components/date.rs
+36 -38
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,35 +19,39 @@ pub fn Date(
#[prop(into)] #[prop(into)]
status: String, status: String,
) -> impl IntoView { ) -> impl IntoView {
view! { important_dates.into_iter()
<div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3 .map(|info: DateInfo| {
hover:bg-gray-100 transition w-full text-left view! {
shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]"> <div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3
<div class="flex-shrink-0 mt-0.5"> hover:bg-gray-100 transition w-full text-left
<img src={icon.clone()} class="h-4 w-4" alt="icon"/> shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]">
</div> <div class="flex-shrink-0 mt-0.5">
<div class="flex-1 min-w-0"> <img src={icon.clone()} class="h-4 w-4" alt="icon"/>
<div class="flex items-start justify-between"> </div>
<div class="flex-1"> <div class="flex-1 min-w-0">
<h3 class="font-semibold text-md text-base"> <div class="flex items-start justify-between">
{title.clone()} <div class="flex-1">
</h3> <h3 class="font-semibold text-md text-base">
<h3 class="font-bold text-md text-base mt-1"> {info.title}
{date.clone()} </h3>
</h3> <h3 class="font-bold text-md text-base mt-1">
<p class="text-sm text-gray-600"> {info.date}
{description.clone()} </h3>
</p> <p class="text-sm text-gray-600">
</div> {info.description}
<div class="flex-shrink-0 ml-2"> </p>
<span </div>
{/* Temporary status color & design*/} <div class="flex-shrink-0 ml-2">
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"> <span
{status.clone()} {/* Temporary status color & design*/}
</span> 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> </div>
</div> }
} })
.collect_view()
} }