#HudPlate

import { useEffect, useState } from 'react';
import { CharacterMark, HudPlate, useHudSpec } from '@aora-bot/react';

export default function Demo() {
  const [used, setUsed] = useState(9_000);
  useEffect(() => {
    const timer = setInterval(() => setUsed((v) => (v >= 15_000 ? 3_000 : v + 500)), 600);
    return () => clearInterval(timer);
  }, []);

  const hud = useHudSpec('context', { used, total: 15_000 });
  const pct = Math.round((used / 15_000) * 100);

  return (
    <div className="site-demo site-demo--center">
      <HudPlate
        title="Context"
        value={pct}
        unit="%"
        lines={[`${(used / 1000).toFixed(1)}k of 15k tokens`]}
        level={pct > 85 ? 'alert' : pct > 70 ? 'warn' : 'info'}
      >
        <CharacterMark shape="hex" color="blue" state="progress" hud={hud} sizePx={72} />
      </HudPlate>
    </div>
  );
}

import { CharacterMark, HudPlate } from '@aora-bot/react';

export default function Demo() {
  return (
    <div className="site-demo">
      <HudPlate title="Sync" value="Done" level="ok" placement="top">
        <CharacterMark shape="tofu" color="green" state="happy" hud={{ kind: 'sync', state: 'done' }} />
      </HudPlate>
      <HudPlate title="Timer" value="0:42" level="warn" placement="right" lines={['Waiting for approval']}>
        <CharacterMark
          shape="pill"
          color="orange"
          state="waiting"
          hud={{ kind: 'timer', remainingMs: 42_000, totalMs: 120_000 }}
        />
      </HudPlate>
      <HudPlate title="Balance" value={3} unit="credits" level="alert">
        <CharacterMark
          shape="hex"
          color="red"
          state="alerting"
          hud={{ kind: 'balance', value: 3, low: true }}
        />
      </HudPlate>
    </div>
  );
}