38 lines
1.1 KiB
Rust
38 lines
1.1 KiB
Rust
use common::Milestone;
|
|
use yew::prelude::*;
|
|
|
|
#[derive(Properties, Clone, PartialEq)]
|
|
pub struct Props {
|
|
pub milestone: Milestone,
|
|
pub completed_achievements: usize,
|
|
}
|
|
|
|
#[function_component(MilestoneComponent)]
|
|
pub fn milestone_component(props: &Props) -> Html {
|
|
let unfilled = props.milestone.goal - props.completed_achievements.min(props.milestone.goal);
|
|
let filled = props.completed_achievements.min(props.milestone.goal);
|
|
|
|
let unfilled_stars = std::iter::repeat(html! {
|
|
<i class={classes!("fas", "fa-fw", "fa-star-half-stroke")} />
|
|
})
|
|
.take(unfilled)
|
|
.collect::<Html>();
|
|
|
|
let filled_stars = std::iter::repeat(html! {
|
|
<i style="color: var(--secondary-color)" class={classes!("fas", "fa-fw", "fa-star")} />
|
|
})
|
|
.take(filled)
|
|
.collect::<Html>();
|
|
|
|
html! {
|
|
<div class="row">
|
|
<p style="text-align: center" class="u-full-width">
|
|
{format!("{} / {}", props.completed_achievements, props.milestone.goal)}
|
|
<br />
|
|
{filled_stars}
|
|
{unfilled_stars}
|
|
</p>
|
|
</div>
|
|
}
|
|
}
|