use cssugar::units::{Px, Vw};

#[function_component(SizedButton)]
pub fn sized_button() -> Html {
    let size = Vw(100) - Px(300);
    let button_css = format!("width: ${size};");
    html! {
        <button style={button_css}>{ "CLICK ME!" }</button>
    }
}

use cssugar::colors::{Color, BLACK};

#[function_component(SizedButton)]
pub fn sized_button() -> Html {
    let color = Color::rgb(255, 0, 0).blend(BLACK);
    let label_css = format!("color: ${color};");
    html! {
        <label style={label_css}>{ "I am dark red!" }</label>
    }
}

use cssugar::colors::{Color, BLACK};

#[function_component(SizedButton)]
pub fn sized_button() -> Html {
    let color = Color::rgb(255, 0, 0).blend(BLACK);
    let label_css = format!("color: ${color};");
    html! {
        <label style={label_css}>{ "I am dark red!" }</label>
    }
}