x
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
<div class="flex flex-wrap items-center gap-6"> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">default</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-primary text-primary-foreground" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">primary</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-destructive text-white" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">destructive</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-amber-500 dark:bg-amber-600 text-white" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">amber</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-emerald-500 dark:bg-emerald-600 text-white" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">emerald</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-purple-500 dark:bg-purple-600 text-white" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">purple</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-sky-500 dark:bg-sky-600 text-white" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">sky</span> </div></div>1
2
3
4
5
6
7
8
<div class="flex flex-wrap items-center gap-6"> <% { default: "bg-muted", primary: "bg-primary", destructive: "bg-destructive", amber: "bg-amber-500", emerald: "bg-emerald-500", purple: "bg-purple-500", sky: "bg-sky-500" }.each do |color, label| %> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(color: color)) { "JD" } %> <span class="text-xs text-muted-foreground"><%= color %></span> </div> <% end %></div>No notes provided.
No params configured.