Avatar

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
44use herogpui::prelude::{ActiveTheme, Avatar, AvatarVariant, Color, icons};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{AnyElement, px};
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Avatar::new("avatar-avatar").name("Jane Doe")
            .into_any_element(),
        Avatar::new("avatar-avatar")
            .into_any_element(),
        // v3's own Fallback Content example drives a
        // deliberately broken URL with
        // `<Avatar.Fallback delayMs={600}>`; an unregistered
        // asset path fails identically here (no network), and
        // the initials replace the box once the delay elapses.
        spec(
            "Broken image",
            Avatar::new("avatar-avatar")
                .name("NA")
                .src("images/avatar-broken.png")
                .delay_ms(600),
            cx,
        ),
        Avatar::new("avatar-avatar")
            .name("HG")
            .fallback(gpui::svg()
                          .size(px(16.))
                          .path(icons::HEART_FILL)
                          .text_color(cx.colors().foreground)
                          .into_any_element())
            .into_any_element(),
        Avatar::new("avatar-color-avatar")
            .name("HG")
            .color(Color::Accent)
            .variant(AvatarVariant::Soft)
            .fallback_color(Color::Warning)
            .into_any_element(),
    ])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20use herogpui::prelude::{Avatar, Size};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(Size::ALL
            .iter()
            .enumerate()
            .map(|(i, s)| {
                Avatar::new(("size-avatar", i))
                    .name("Ada Lovelace")
                    .size(*s)
                    .into_any_element()
            }))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21use herogpui::prelude::{Avatar, AvatarVariant, Color};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(AvatarVariant::ALL
            .iter()
            .enumerate()
            .map(|(i, v)| {
                Avatar::new(("variant-avatar", i))
                    .name("HG")
                    .color(Color::Accent)
                    .variant(*v)
                    .into_any_element()
            }))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24use herogpui::prelude::{Avatar, Toast};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;
use std::sync::Arc;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        Avatar::new("avatar-loader-avatar")
            .name("JD")
            .src(sample_avatar_source())
            .fallback("JD")
            .on_load(|_, cx| {
                Toast::new("Avatar image loaded")
                    .description("on_load fired once for the custom source.")
                    .push(Some(std::time::Duration::from_secs(3)), cx);
            })
            .into_any_element(),
    ])

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/// One stable custom image source for the Avatar "Custom Image Component"
/// demo: the loader `Arc` is built once, so the avatar's per-source keyed
/// state and its `on_load` keep their identity across frames.
fn sample_avatar_source() -> gpui::ImageSource {
    type AvatarLoader = std::sync::Arc<
        dyn Fn(
                &mut gpui::Window,
                &mut gpui::App,
            )
                -> Option<Result<std::sync::Arc<gpui::RenderImage>, gpui::ImageCacheError>>
            + Send
            + Sync,
    >;
    static LOADER: std::sync::OnceLock<AvatarLoader> = std::sync::OnceLock::new();
    let loader: &AvatarLoader = LOADER.get_or_init(|| {
        let image = std::sync::Arc::new(gpui::Image::from_bytes(
            gpui::ImageFormat::Png,
            include_bytes!("../../../assets/herogpui/sample.png").to_vec(),
        ));
        std::sync::Arc::new(move |window: &mut gpui::Window, cx: &mut gpui::App| {
            image.clone().use_render_image(window, cx).map(Ok)
        })
    });
    gpui::ImageSource::Custom(loader.clone())
}