Colored fallback

1import { Avatar, AvatarFallback } from '@/components/ui/avatar'
2 
3const people = [
4  { initials: 'SR', className: 'bg-primary text-primary-foreground' },
5  { initials: 'LC', className: 'bg-secondary text-secondary-foreground' },
6  { initials: 'AM', className: 'bg-accent text-accent-foreground' },
7  { initials: 'JD', className: 'bg-muted text-foreground' },
8]
9 
10export function Avatar05() {
11  return (
12    <div className="flex items-center gap-3">
13      {people.map(({ initials, className }) => (
14        <Avatar key={initials}>
15          <AvatarFallback className={className}>{initials}</AvatarFallback>
16        </Avatar>
17      ))}
18    </div>
19  )
20}