import React from 'react';
import styles from './index.less';

const tips = [
  '节点管理对组件的「自定义事件」配置进行管理',
  `<span class=${styles.keyboard}>按住空格</span> + <span class=${styles.keyboard}>拖拽</span> 调整节点视图`,
  `<ul class=${styles.select}>在图层选中</ul>节点可在视图中快速定位`,
  '可选中图层在视图中快速定位节点',
  `<span class=${styles.keyboard}>双击</span> 节点或 <span class=${styles.keyboard}>右键</span> 节点选择「在画布编辑中选中」可跳转至画布选中对应组件`,
  `节点网络复杂不便于问题排查时，可<ul class=${styles.select}>选中相关节点</ul>后点击「隐藏不相关」`,
];

function Tips() {
  return (
    <div className={styles.content}>
      <ul className={styles.tips}>
        {tips.map((d, i) => {
          return (
            <li data-index={i + 1} key={d}>
              <p className={styles.list}>
                <span className={styles.sequence}>{i + 1}.</span>{' '}
                <span className={styles.desc} dangerouslySetInnerHTML={{ __html: d }}></span>
              </p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default Tips;
