import React from 'react';
import Message from 'docs/components/message';
import Divide from 'docs/components/divide';
import { Quote } from 'docs/components';

const UsageNotes = () => {
  return (
    <section>
      <Divide id="usage-notes" title="使用注意" />
      <Message.left>讲到这里我也就介绍完啦，你还有什么其他的疑惑呢？</Message.left>
      <Message.right>
        <Quote>Fabric.js</Quote>对于我来说并不熟悉，这会导致我很难上手使用吗？
      </Message.right>
      <Message.left>
        如果<Quote>FabricTexture</Quote>
        类默认交互和主题色配置可以满足你，那它几乎没有上手难度，但如果你还想定制交互元素的样式，甚至是交互逻辑和事件，那很遗憾的说，只有当你对
        <Quote>Fabric.js</Quote>有一定了解才能进行下一步。
      </Message.left>
      <Message.left>
        另外当你决定使用<Quote>FabricTexture</Quote>类时，请确保已经安装<Quote>Fabric.js</Quote>
        这个库（当前基于v6版本, 如果正在使用v5版本请对应安装本依赖v1.0.0版本），否则将无法达到你的预期。
      </Message.left>
      <Message.right>非常感谢你的提醒～</Message.right>
      <Message.right>最后想请教一下这个库可以在什么场景下使用呢？</Message.right>
      <Message.left>
        我想既然你已经了解它了，那当你遇到需要它的场景时自然会想起它，相比这个问题我更想强调它的有趣，不是吗？哈哈。
      </Message.left>
      <Message.right>哈哈是的，非常感谢你的分享～</Message.right>
      <Message.left>😎🤝</Message.left>
    </section>
  );
};

export default UsageNotes;