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::*;
/// # 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()
}