import React, { useState } from 'react';
import ContentBox from '../../../themeComponents/ContentBox';
import InfoBox from '../../../themeComponents/ContentBox/InfoBox';
import { Button, Checkbox } from 'antd';
import Modal from '../../../themeComponents/Modal';
import './index.less';

export default function DrawerTheme() {
  const [visible, setVisible] = useState(false);
  return (
    <ContentBox className="drawer-theme-component">
      <InfoBox title="Modal示例" contentStyle={{ padding: 20 }} className="form-info-box">
        <Button type="primary" onClick={() => setVisible(true)}>
          点击打开Modal
        </Button>
      </InfoBox>
      <Modal visible={visible} title="弹出层" width={600} onCancel={() => setVisible(false)}>
        <InfoBox title="Checkbox示例" contentStyle={{ padding: 20 }} className="form-info-box">
          <Checkbox>复选框1</Checkbox>
          <Checkbox checked>复选框2</Checkbox>
          <Checkbox disabled>复选框3</Checkbox>
          <Checkbox checked disabled>
            复选框4
          </Checkbox>
        </InfoBox>
      </Modal>
    </ContentBox>
  );
}
