#徽标与状态

import { AgentAvatar, UnreadBadge, AvatarStatusDot } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      {[1, 9, 42, 128].map((count) => (
        <span key={count} style={{ position: 'relative', display: 'inline-flex' }}>
          <AgentAvatar agent={{ id: `badge-${count}` }} sizePx={44} still />
          <span style={{ position: 'absolute', top: -4, insetInlineEnd: -8 }}>
            <UnreadBadge count={count} />
          </span>
        </span>
      ))}
    </div>
  );
}

import { AgentAvatar, AvatarStatusDot } from '@aora-bot/react';

const tones = ['online', 'busy', 'away', 'offline', 'working', 'attention', 'error', 'info'] as const;

export default function Demo() {
  return (
    <div className="site-demo">
      {tones.map((tone) => (
        <div className="site-demo__cell" key={tone}>
          <span style={{ position: 'relative', display: 'inline-flex' }}>
            <AgentAvatar agent={{ id: tone }} sizePx={44} still />
            <span style={{ position: 'absolute', bottom: 0, insetInlineEnd: 0 }}>
              <AvatarStatusDot tone={tone} pulse={tone === 'busy'} />
            </span>
          </span>
          <span className="site-demo__label">{tone}</span>
        </div>
      ))}
    </div>
  );
}