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

Add date list component #50

Merged
BobdaFett merged 37 commits from feat/date-component into main 2026-01-16 14:02:18 +00:00
Conversation 1 Commits 37 Files Changed 37
+58 -36
1 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7cf2facb18 - Show all commits
src/components/date.rs
+58 -36
View File
@@ -1,5 +1,5 @@
use crate::common::{DateInfo, DateRange};
use leptos::either::Either;
use crate::common::{DateInfo, DateRange, DateStatus};
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,43 +56,37 @@ 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()
.map(|info: DateInfo| {
view! {
<div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3
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-bold text-md text-base">
{info.title}
</h3>
<h3 class="text-md text-base mt-1">
{render_dates(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 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-bold text-md text-base">
{info.title}
</h3>
<h3 class="text-md text-base mt-1">
{render_dates(info.date)}
</h3>
<p class="text-sm text-gray-600">
{info.description}
</p>
</div>
<div class="flex-shrink-0 ml-2">
{render_status(info.status)}
</div>
</div>
</div>
}
})
.collect_view()
</div>
</div>
}
})
.collect_view()
}