import * as React from 'react';
import { Col, Row, Space, Switch } from '@btri-ui/base';
import style from './index.less';

const Base = () => {
  return (
    <>
      <Row autoMode={true}>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>开关类型</div>
            <div className={style.height}>默认</div>
            <div className={style.height}>小尺寸</div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>默认</div>
            <div className={style.height}>
              <Switch defaultChecked />
            </div>
            <div className={style.height}>
              <Switch defaultChecked size="small" />
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>禁用</div>
            <div className={style.height}>
              <Switch defaultChecked disabled />
            </div>
            <div className={style.height}>
              <Switch defaultChecked size="small" disabled />
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>文字</div>
            <div className={style.height}>
              <Switch
                checkedChildren="开"
                unCheckedChildren="关"
                defaultChecked
              />
            </div>
            <div className={style.height}>
              <Switch
                checkedChildren="开"
                unCheckedChildren="关"
                defaultChecked
                size="small"
              />
            </div>
          </Space>
        </Col>
        <Col span={2}>
          <Space direction="vertical">
            <div className={style.height}>文字</div>
            <div className={style.height}>
              <Switch loading defaultChecked />
            </div>
            <div className={style.height}>
              <Switch loading defaultChecked size="small" />
            </div>
          </Space>
        </Col>
      </Row>
    </>
  );
};

export default Base;