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! { }) .take(unfilled) .collect::(); let filled_stars = std::iter::repeat(html! { }) .take(filled) .collect::(); html! {

{format!("{} / {}", props.completed_achievements, props.milestone.goal)}
{filled_stars} {unfilled_stars}

} }