tinkr 0.0.43

Tinkr is a web framework for quickly building full-stack web applications with Leptos.
Documentation 
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::prelude::*;

#[component]
pub fn UserAvatar(
    name: Option<String>,
    image: Option<String>,
    #[prop(default = "md")] size: &'static str,
    #[prop(default = "")] class: &'static str,
) -> impl IntoView {
    let size_class = match size {
        "sm" => "w-6 h-6",
        "md" => "w-8 h-8",
        "lg" => "w-10 h-10",
        "xl" => "w-12 h-12",
        _ => "w-8 h-8", // default to md
    };

    let avatar_url = if let Some(img) = image {
        img
    } else if let Some(n) = &name {
        format!(
            "https://ui-avatars.com/api/?name={}&background=3B82F6&color=fff&size=128",
            n
        )
    } else {
        format!("https://ui-avatars.com/api/?name=U&background=6B7280&color=fff&size=128")
    };

    let default_class = "rounded-full object-cover";
    let combined_class = if !class.is_empty() {
        format!("{} {} {}", size_class, default_class, class)
    } else {
        format!("{} {}", size_class, default_class)
    };

    view! {
        <img
            src=avatar_url
            alt=name.unwrap_or_else(|| "User avatar".to_string())
            class=combined_class
        />
    }
}