/*
* annotation like `placeholder begin *** and
* placeholder end ***` is required for generate ewt manual, please keep it
*/
import React from 'react';
import Code from '@/Code';
import Demo from '@/Demo';

import { Template } from '~/index.ts';

import './index.scss';

const DemoComponent = () => {
  const codeSmall = `
import { EmptyData } from '@ewtd/ewt';

<EmptyData style={{ width: '200px' }} type="small" />
`;

  return (
    <Demo>
      <h2>Template 组件</h2>
      <p>空数据组件，数据为空时使用。</p>
      <h3>代码演示</h3>
      <Code sourceCode={codeSmall} buttonText="小尺寸">
        <Template style={{ width: '200px' }} type="small" />
      </Code>
      <h3>API</h3>
      <table>
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>是否必须</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>className</td>
            <td>添加自定义class</td>
            <td>string</td>
            <td>否</td>
            <td><Code mode="inline">&#39;&#39;</Code></td>
          </tr>
          <tr>
            <td>style</td>
            <td>自定义样式</td>
            <td>object</td>
            <td>否</td>
            <td><Code mode="inline">{'{}'}</Code></td>
          </tr>
          <tr>
            <td>prefixCls</td>
            <td>样式名前缀</td>
            <td>string</td>
            <td>否</td>
            <td>ewt-homework-template</td>
          </tr>
        </tbody>
      </table>
    </Demo>
  );
};

export default DemoComponent;