Picture, initials, a status and a group

// apps/docs/examples/ui/avatar.tsx'use client';
import {  Avatar,  AvatarBadge,  AvatarFallback,  AvatarGroup,  AvatarGroupCount,  AvatarImage,} from '@workspace/active-ui/components/primitives/avatar';
// A portrait drawn inline, so the example loads nothing from elsewhere.const PORTRAIT =  'data:image/svg+xml,' +  encodeURIComponent(    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect width="40" height="40" fill="#c7d2fe"/><circle cx="20" cy="15" r="7" fill="#4338ca"/><path d="M6 38c2-9 8-13 14-13s12 4 14 13z" fill="#4338ca"/></svg>',  );
// An image that cannot be decoded, as a missing photo would fail to load.const BROKEN = 'data:image/png;base64,AAAA';
/** * A person as a picture, or as initials when there is no picture or it * fails to load. Three sizes, a status badge, and a group that ends in a * count of the rest. */export default function AvatarExample() {  return (    <div className="flex flex-col items-center gap-6">      <div className="flex items-center gap-4">        <Avatar size="sm">          <AvatarImage src={PORTRAIT} alt="Sam de Vries" />          <AvatarFallback>SV</AvatarFallback>        </Avatar>        <Avatar>          <AvatarImage src={PORTRAIT} alt="Sam de Vries" />          <AvatarFallback>SV</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarImage src={BROKEN} alt="Noor Jansen" />          <AvatarFallback>NJ</AvatarFallback>        </Avatar>        <Avatar size="lg">          <AvatarFallback>AB</AvatarFallback>          <AvatarBadge            className="bg-tone-success"            role="img"            aria-label="Online"          />        </Avatar>      </div>      <AvatarGroup>        {['SV', 'NJ', 'AB'].map((initials) => (          <Avatar key={initials}>            <AvatarFallback>{initials}</AvatarFallback>          </Avatar>        ))}        <AvatarGroupCount>+9</AvatarGroupCount>      </AvatarGroup>    </div>  );}