atproto blogging
nonbinary.computer
1use dioxus::prelude::*;
2use dioxus_primitives::avatar::{self, AvatarFallbackProps, AvatarImageProps, AvatarState};
3
4#[derive(Clone, Copy, PartialEq, Default)]
5pub enum AvatarImageSize {
6 #[default]
7 Small,
8 #[allow(dead_code)]
9 Medium,
10 #[allow(dead_code)]
11 Large,
12}
13
14impl AvatarImageSize {
15 fn to_class(self) -> &'static str {
16 match self {
17 AvatarImageSize::Small => "avatar-sm",
18 AvatarImageSize::Medium => "avatar-md",
19 AvatarImageSize::Large => "avatar-lg",
20 }
21 }
22}
23
24/// The props for the [`Avatar`] component.
25#[derive(Props, Clone, PartialEq)]
26pub struct AvatarProps {
27 /// Callback when image loads successfully
28 #[props(default)]
29 pub on_load: Option<EventHandler<()>>,
30
31 /// Callback when image fails to load
32 #[props(default)]
33 pub on_error: Option<EventHandler<()>>,
34
35 /// Callback when the avatar state changes
36 #[props(default)]
37 pub on_state_change: Option<EventHandler<AvatarState>>,
38
39 #[props(default)]
40 pub size: AvatarImageSize,
41
42 /// Additional attributes for the avatar element
43 #[props(extends = GlobalAttributes)]
44 pub attributes: Vec<Attribute>,
45
46 /// The children of the Avatar component, which can include AvatarImage and AvatarFallback
47 pub children: Element,
48}
49
50#[component]
51pub fn Avatar(props: AvatarProps) -> Element {
52 rsx! {
53 document::Link { rel: "stylesheet", href: asset!("./avatar.css") }
54
55 avatar::Avatar {
56 class: "avatar {props.size.to_class()}",
57 on_load: props.on_load,
58 on_error: props.on_error,
59 on_state_change: props.on_state_change,
60 attributes: props.attributes,
61 {props.children}
62 }
63 }
64}
65
66#[component]
67pub fn AvatarImage(props: AvatarImageProps) -> Element {
68 rsx! {
69 avatar::AvatarImage {
70 class: "avatar-image",
71 src: props.src,
72 alt: props.alt,
73 attributes: props.attributes,
74 }
75 }
76}
77
78#[component]
79pub fn AvatarFallback(props: AvatarFallbackProps) -> Element {
80 rsx! {
81 avatar::AvatarFallback { class: "avatar-fallback", attributes: props.attributes, {props.children} }
82 }
83}