#AvatarStack

import { AvatarStack } from '@aora-bot/react';

const members = [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }, { id: 'e' }, { id: 'f' }];

export default function Demo() {
  return (
    <div className="site-demo">
      {[2, 3, 4, 6].map((n) => (
        <div className="site-demo__cell" key={n}>
          <AvatarStack members={members.slice(0, n)} sizePx={34} />
          <span className="site-demo__label">{n} 位成员</span>
        </div>
      ))}
    </div>
  );
}

import { AvatarStack } from '@aora-bot/react';

const shaped = [
  { id: 'a', shape: 'hex' as const },
  { id: 'b', shape: 'onigiri' as const },
  { id: 'c', shape: 'drop' as const },
];

export default function Demo() {
  return (
    <div className="site-demo">
      <AvatarStack members={shaped} sizePx={48} />
      <AvatarStack members={shaped} sizePx={48} overlap={0.5} />
    </div>
  );
}

import { AvatarStack } from '@aora-bot/react';

const many = Array.from({ length: 12 }, (_, i) => ({ id: `m-${i}` }));

export default function Demo() {
  return (
    <div className="site-demo">
      <AvatarStack members={many} sizePx={32} />
      <AvatarStack members={many} sizePx={32} maxVisible={5} />
      <AvatarStack members={many} sizePx={32} showOverflow={false} />
    </div>
  );
}

import { AvatarStack, layoutAvatarStack, participantsFromMembers, stackMetrics } from '@aora-bot/react';

const members = Array.from({ length: 7 }, (_, i) => ({ id: `p-${i}` }));

export default function Demo() {
  const metrics = stackMetrics('lg');
  const { visible, hidden } = participantsFromMembers(members, metrics.maxVisible);
  const layout = layoutAvatarStack(visible.length, metrics.sizePx, {
    overlap: metrics.overlap,
    withOverflow: hidden > 0,
  });
  return (
    <div className="site-demo site-demo--column">
      <AvatarStack
        members={members}
        sizePx={metrics.sizePx}
        overlap={metrics.overlap}
        maxVisible={metrics.maxVisible}
      />
      <span className="site-demo__label">
        lg → {metrics.sizePx}px，重叠 {metrics.overlap}，显示 {visible.length} 个 + 隐藏 {hidden} 个，宽度{' '}
        {Math.round(layout.width)}px，偏移 {layout.offsets.map((o) => Math.round(o)).join(' / ')}
      </span>
    </div>
  );
}