#Tour 引导

import { Button, Card, Space, Tour } from '@ifhover/leaf-ui';

import { useRef, useState } from 'react';

export function TourBasic() {
  const [open, setOpen] = useState(false),
    [current, setCurrent] = useState(0);
  const create = useRef<HTMLButtonElement>(null),
    settings = useRef<HTMLButtonElement>(null);
  return (
    <Card title={'你的工作区'}>
      <Space wrap>
        <Button ref={create}>{'新建项目'}</Button>
        <Button ref={settings} variant="outline">
          {'工作区设置'}
        </Button>
        <Button
          variant="ghost"
          onClick={() => {
            setCurrent(0);
            setOpen(true);
          }}
        >
          {'开始引导'}
        </Button>
      </Space>
      <Tour
        open={open}
        current={current}
        onChange={setCurrent}
        onClose={() => setOpen(false)}
        steps={[
          {
            key: 'create',
            title: '创建第一个项目',
            description: '把相关任务放在同一个项目中。',
            target: () => create.current,
          },
          {
            key: 'settings',
            title: '按团队习惯设置',
            description: '在工作区设置中调整团队偏好。',
            target: () => settings.current,
          },
        ]}
      />
    </Card>
  );
}

import { Button, Tour } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TourCentered() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        {'查看欢迎说明'}
      </Button>
      <Tour
        open={open}
        onClose={() => setOpen(false)}
        steps={[
          {
            title: '欢迎来到 Leaf',
            description: '未指定目标的说明会显示在页面中央。',
          },
        ]}
      />
    </>
  );
}