#RestrictedScene

import { useState } from 'react';
import { RestrictedScene, type RestrictedTone } from '@aora-bot/surfaces';

const tones: RestrictedTone[] = ['restricted', 'offline', 'unauthorised'];

export default function Demo() {
  const [tone, setTone] = useState<RestrictedTone>('restricted');
  return (
    <div className="site-demo site-demo--column">
      <RestrictedScene
        tone={tone}
        rotateMs={4000}
        action={
          <button className="site-btn" onClick={() => setTone('restricted')}>
            返回
          </button>
        }
      />
      <div className="site-controls">
        {tones.map((t) => (
          <button key={t} className="site-btn" data-active={tone === t} onClick={() => setTone(t)}>
            {t}
          </button>
        ))}
      </div>
    </div>
  );
}

import { CharacterMark } from '@aora-bot/react';
import { DeviceBezel } from '@aora-bot/surfaces';

export default function Demo() {
  return (
    <div className="site-demo">
      {(['off', 'on', 'alert'] as const).map((light) => (
        <div className="site-demo__cell" key={light}>
          <DeviceBezel widthPx={150} light={light}>
            <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}>
              <CharacterMark
                shape="tofu"
                color="cyan"
                state={light === 'alert' ? 'alerting' : 'idle'}
                sizePx={56}
              />
            </div>
          </DeviceBezel>
          <span className="site-demo__label">{light}</span>
        </div>
      ))}
    </div>
  );
}