#CompactCharacterPicker

import { useState } from 'react';
import { AgentAvatar, CompactCharacterPicker, type ColorId, type ShapeId } from '@aora-bot/react';

export default function Demo() {
  const [shape, setShape] = useState<ShapeId>('blob');
  const [color, setColor] = useState<ColorId>('blue');
  return (
    <div className="site-demo site-demo--column">
      <AgentAvatar agent={{ id: 'first', shape, color }} size="xl" />
      <CompactCharacterPicker shape={shape} color={color} onSelectShape={setShape} onSelectColor={setColor} />
    </div>
  );
}