import React, { useState } from 'react';
import { Icon, Col, Tag, Row } from '@btri-ui/base';

export default () => {
  const [value, setValue] = useState('点击切换 Input,回车更新文案');
  const getValue = (v: string) => {
    setValue(v || '点击切换 Input,回车更新文案');
  };

  return (
    <>
      <Row autoMode={true}>
        <Col span={2}>
          <Tag closable>标签</Tag>
        </Col>
        <Col span={2}>
          <Tag icon={<Icon iconName="File" />} closable>
            标签
          </Tag>
        </Col>
        <Col span={2}>
          <Tag type="warning" closable>
            标签
          </Tag>
        </Col>
        <Col span={2}>
          <Tag type="success" closable>
            标签
          </Tag>
        </Col>
        <Col span={2}>
          <Tag type="primary" closable>
            标签
          </Tag>
        </Col>
        <Col span={2}>
          <Tag type="error" closable>
            标签
          </Tag>
        </Col>
        <Col span={2}>
          <Tag isEdit onInput={getValue}>
            {value}
          </Tag>
        </Col>
      </Row>
    </>
  );
};