1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

use leptos::*;

#[component]
pub fn Image(
    #[prop(optional, into)] src: MaybeSignal<String>,
    #[prop(optional, into)] alt: MaybeSignal<String>,
    #[prop(optional, into)] width: MaybeSignal<String>,
    #[prop(optional, into)] height: MaybeSignal<String>,
    #[prop(optional, into)] border_radius: MaybeSignal<String>,
    #[prop(optional, into)] object_fit: MaybeSignal<String>,
    #[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
    let style = move || {
        let mut style = String::new();

        let width = width.get();
        if !width.is_empty() {
            style.push_str(&format!("width: {width};"))
        }

        let height = height.get();
        if !height.is_empty() {
            style.push_str(&format!("height: {height};"))
        }

        let border_radius = border_radius.get();
        if !border_radius.is_empty() {
            style.push_str(&format!("border-radius: {border_radius};"))
        }

        style
    };

    view! {
        <img
            class=move || class.get()
            src=move || src.get()
            alt=move || alt.get()
            style=style
            object_fit=move || object_fit.get()
        />
    }
}