#CharacterPicker

import { useState } from 'react';
import { CharacterPicker, CharacterMark, type FaceStyle } from '@aora-bot/react';

export default function Demo() {
  const [shape, setShape] = useState('blob' as const);
  const [color, setColor] = useState('blue' as const);

  return (
    <div className="site-demo">
      <CharacterMark shape={shape} color={color} state="happy" sizePx={120} />
      <CharacterPicker
        shape={shape}
        color={color}
        onSelectShape={setShape as never}
        onSelectColor={setColor as never}
      />
    </div>
  );
}

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

export default function Demo() {
  return (
    <div className="site-demo site-demo--column">
      <CharacterPicker
        shape="hex"
        color="green"
        layout="row"
        shapes={['blob', 'hex', 'onigiri', 'cloud', 'leaf']}
      />
    </div>
  );
}

import { useState } from 'react';
import { CharacterPicker, CharacterMark, type FaceStyle } from '@aora-bot/react';

export default function Demo() {
  const [shape, setShape] = useState('pear' as const);
  const [color, setColor] = useState('green' as const);
  const [face, setFace] = useState<FaceStyle>('line');
  const [nose, setNose] = useState('slant' as const);

  return (
    <div className="site-demo">
      <CharacterMark shape={shape} color={color} state="happy" sizePx={120} face={face} nose={nose} />
      <CharacterPicker
        shape={shape}
        color={color}
        face={face}
        nose={nose}
        shapes={['pear', 'blob', 'bun', 'ghost', 'egg', 'tofu']}
        colors={['green', 'blue', 'orange']}
        onSelectShape={setShape as never}
        onSelectColor={setColor as never}
        onSelectFace={setFace}
        onSelectNose={setNose as never}
      />
    </div>
  );
}

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

export default function Demo() {
  return (
    <CharacterPicker
      shape="pill"
      color="magenta"
      shapes={['pill', 'tofu', 'ghost', 'bell']}
      colors={['magenta', 'violet', 'cyan']}
    />
  );
}

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

export default function Demo() {
  return (
    <CharacterPicker
      shape="star"
      color="yellow"
      layout="row"
      sizePx={24}
      shapes={['star', 'hex', 'flower', 'flame', 'bell']}
      colors={['yellow', 'orange', 'red']}
    />
  );
}