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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
use leptos::prelude::*;
use super::{Avatar, AvatarImage, AvatarFallback, AvatarSize, AvatarShape, AvatarStatus};
#[component]
pub fn BasicExample() -> impl IntoView {
view! {
<div style="display: flex; flex-direction: column; gap: 3rem;">
// Sizes
<div>
<h4>"Sizes"</h4>
<div style="display: flex; gap: 1rem; align-items: center;">
<Avatar size=AvatarSize::Xs>
<AvatarFallback>"XS"</AvatarFallback>
</Avatar>
<Avatar size=AvatarSize::Sm>
<AvatarFallback>"SM"</AvatarFallback>
</Avatar>
<Avatar size=AvatarSize::Md>
<AvatarFallback>"MD"</AvatarFallback>
</Avatar>
<Avatar size=AvatarSize::Lg>
<AvatarFallback>"LG"</AvatarFallback>
</Avatar>
<Avatar size=AvatarSize::Xl>
<AvatarFallback>"XL"</AvatarFallback>
</Avatar>
</div>
</div>
// Shapes
<div>
<h4>"Shapes"</h4>
<div style="display: flex; gap: 1rem; align-items: center;">
<Avatar shape=AvatarShape::Circle>
<AvatarFallback>"CR"</AvatarFallback>
</Avatar>
<Avatar shape=AvatarShape::Square>
<AvatarFallback>"SQ"</AvatarFallback>
</Avatar>
<Avatar shape=AvatarShape::Rounded>
<AvatarFallback>"RD"</AvatarFallback>
</Avatar>
</div>
</div>
// Status
<div>
<h4>"Status Indicators"</h4>
<div style="display: flex; gap: 1rem; align-items: center;">
<Avatar status=AvatarStatus::Online>
<AvatarImage
src="https://i.pravatar.cc/150?img=1".to_string()
alt="Online user".to_string()
/>
<AvatarFallback>"ON"</AvatarFallback>
</Avatar>
<Avatar status=AvatarStatus::Busy>
<AvatarImage
src="https://i.pravatar.cc/150?img=2".to_string()
alt="Busy user".to_string()
/>
<AvatarFallback>"BS"</AvatarFallback>
</Avatar>
<Avatar status=AvatarStatus::Away>
<AvatarImage
src="https://i.pravatar.cc/150?img=3".to_string()
alt="Away user".to_string()
/>
<AvatarFallback>"AW"</AvatarFallback>
</Avatar>
<Avatar status=AvatarStatus::Offline>
<AvatarImage
src="https://i.pravatar.cc/150?img=4".to_string()
alt="Offline user".to_string()
/>
<AvatarFallback>"OF"</AvatarFallback>
</Avatar>
</div>
</div>
// Badges
<div>
<h4>"Notification Badges"</h4>
<div style="display: flex; gap: 1rem; align-items: center;">
<Avatar badge=3>
<AvatarFallback>"JD"</AvatarFallback>
</Avatar>
<Avatar badge=99>
<AvatarFallback>"AB"</AvatarFallback>
</Avatar>
<Avatar size=AvatarSize::Lg badge=5>
<AvatarImage
src="https://i.pravatar.cc/150?img=5".to_string()
alt="User with badge".to_string()
/>
<AvatarFallback>"CD"</AvatarFallback>
</Avatar>
</div>
</div>
// Combined
<div>
<h4>"Combined Features"</h4>
<div style="display: flex; gap: 1rem; align-items: center;">
<Avatar
size=AvatarSize::Lg
shape=AvatarShape::Rounded
status=AvatarStatus::Online
badge=12
>
<AvatarImage
src="https://i.pravatar.cc/150?img=6".to_string()
alt="User".to_string()
/>
<AvatarFallback>"EF"</AvatarFallback>
</Avatar>
<Avatar
size=AvatarSize::Xl
shape=AvatarShape::Square
status=AvatarStatus::Busy
>
<AvatarFallback>"GH"</AvatarFallback>
</Avatar>
</div>
</div>
// Fallback only
<div>
<h4>"Fallback (Initials)"</h4>
<div style="display: flex; gap: 1rem; align-items: center;">
<Avatar size=AvatarSize::Sm>
<AvatarFallback>"JD"</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>"AB"</AvatarFallback>
</Avatar>
<Avatar size=AvatarSize::Lg>
<AvatarFallback>"CD"</AvatarFallback>
</Avatar>
</div>
</div>
</div>
}
}