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

function renders status of each state

Browse Source
This commit is contained in:
meraghon committed 2025-12-22 10:36:56 -05:00
1 parent 03f7adb74d
commit 7cf2facb18
1 file changed
+58 -36
Download Patch File Download Diff File Expand all files Collapse all files
src/components/date.rs
+58 -36
View File
@@ -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::*; use leptos::prelude::*;
/// # Date Component /// # 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] #[component]
pub fn Date( pub fn Date(
/// Struct of title, date, and description /// 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. /// The file path or URL of the icon displayed at the top of the button.
#[prop(into)] #[prop(into)]
icon: String, icon: String,
/// The status of the event (open, upcoming, deadline...)
#[prop(into)]
status: String,
) -> impl IntoView { ) -> impl IntoView {
important_dates.into_iter() important_dates
.map(|info: DateInfo| { .into_iter()
view! { .map(|info: DateInfo| {
<div class="dashboard-button flex items-start gap-3 rounded-lg border-grey-300 p-3 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 hover:bg-gray-100 transition w-full text-left
shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]"> shadow-[inset_0_0_6px_rgba(0,0,0,0.12)]">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<img src={icon.clone()} class="h-4 w-4" alt="icon"/> <img src={icon.clone()} class="h-4 w-4" alt="icon"/>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
<div class="flex-1"> <div class="flex-1">
<h3 class="font-bold text-md text-base"> <h3 class="font-bold text-md text-base">
{info.title} {info.title}
</h3> </h3>
<h3 class="text-md text-base mt-1"> <h3 class="text-md text-base mt-1">
{render_dates(info.date)} {render_dates(info.date)}
</h3> </h3>
<p class="text-sm text-gray-600"> <p class="text-sm text-gray-600">
{info.description} {info.description}
</p> </p>
</div> </div>
<div class="flex-shrink-0 ml-2"> <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>
</div> </div>
</div> </div>
} </div>
}) }
.collect_view() })
.collect_view()
} }