ui_storybook/components/shell/
user_avatar.rs

1//! `UserAvatar` — bottom-of-rail user marker (M-UI.2 / AUT-122).
2//!
3//! Square tile with rounded corners. Shows either an initial monogram
4//! or a `src` (URL/path) when available. The component does not load
5//! the image — production wiring in `app-ui` sets `src` to the
6//! resolved avatar path or leaves it `None` to fall back to monogram.
7
8use leptos::prelude::*;
9
10/// View-model for the user avatar.
11#[derive(Debug, Clone, PartialEq, Eq)]
12pub struct UserAvatarView {
13    /// 1- or 2-letter monogram used when `src` is `None`.
14    pub monogram: &'static str,
15    /// Optional resolved avatar URL/path.
16    pub src: Option<&'static str>,
17    /// Full display name, used for the accessible title.
18    pub name: &'static str,
19}
20
21#[component]
22pub fn UserAvatar(view: UserAvatarView) -> impl IntoView {
23    let src = view.src;
24    let monogram = view.monogram;
25    view! {
26        <button class="user-avatar" title=view.name aria-label=view.name>
27            {match src {
28                Some(s) => view! { <img class="user-avatar-img" src=s alt=view.name /> }.into_any(),
29                None => view! { <span class="user-avatar-monogram">{monogram}</span> }.into_any(),
30            }}
31        </button>
32    }
33}
ui_storybook/components/shell/user_avatar.rs

ui_storybook/components/shell/
user_avatar.rs
