#引导页组件

import { MarkStageProvider } from '@aora-bot/react';
import { Composer, DemoDesktop, JobBubbles } from '@aora-bot/surfaces';

export default function Demo() {
  return (
    <MarkStageProvider>
      <div className="site-demo site-demo--center">
        <DemoDesktop
          title="工作区"
          widthPx={380}
          toolbar={<span style={{ opacity: 0.6 }}>app.example/inbox</span>}
        >
          <div style={{ display: 'grid', gap: 16, padding: '24px 16px 12px' }}>
            <JobBubbles
              shape="blob"
              color="blue"
              radiusPx={84}
              jobs={['读需求', '起草回复', '核对数字', '开 pull request']}
            />
            <Composer placeholder="想做什么都可以说" onSubmit={() => {}} />
          </div>
        </DemoDesktop>
      </div>
    </MarkStageProvider>
  );
}

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

const cards: SuggestionCard[] = [
  { id: 'triage', title: '整理收件箱', body: '把昨夜到达的邮件按该看的人分类。' },
  { id: 'standup', title: '写站会纪要', body: '从昨天的提交里提炼三行。' },
  { id: 'audit', title: '审计依赖', body: '找出过期的依赖，并说明风险有多大。' },
];

export default function Demo() {
  const [picked, setPicked] = useState<string | null>(null);
  return (
    <div className="site-demo site-demo--column">
      <SuggestionCards cards={cards} onPick={(card) => setPicked(card.title)} />
      <span className="site-demo__label">{picked ?? '选一张'}</span>
    </div>
  );
}

import { LandingWait } from '@aora-bot/surfaces';

export default function Demo() {
  return (
    <div className="site-demo">
      <LandingWait title="随时可以开始" body="给它第一个任务，它就会动起来。" />
      <LandingWait
        title="批准窗口"
        body="超时后运行会自行继续。"
        waitMs={90_000}
        action={<button className="site-btn">立即批准</button>}
      />
    </div>
  );
}

import { MarkStageProvider } from '@aora-bot/react';
import { HandOff } from '@aora-bot/surfaces';

export default function Demo() {
  return (
    <MarkStageProvider>
      <div className="site-demo site-demo--center">
        <HandOff
          from={{ id: 'ada', name: 'Ada' }}
          to={{ id: 'grace', name: 'Grace' }}
          label="发布说明"
          loop
        />
      </div>
    </MarkStageProvider>
  );
}