import React from 'react';
import { List, Row } from '@btri-ui/base';
import './index.less';

export default () => {
  const data = [
    { label: '中列表，内容列表内容列表内容列表内容', key: 'a1' },
    { label: '中列表，内容列表内容列表内容列表内容', key: 'a2' },
  ];
  const data2 = [
    { label: '小列表，内容列表内容列表内容列表内容', key: 'a3' },
    { label: '小列表，内容列表内容列表内容列表内容', key: 'a4' },
  ];
  const data3 = [
    { label: '大列表，内容列表内容列表内容列表内容', key: 'a3' },
    { label: '大列表，内容列表内容列表内容列表内容', key: 'a4' },
  ];

  return (
    <>
      <Row>
        <List
          bordered
          dataSource={data2}
          size="small"
          renderItem={(item: any) => (
            <List.Item>
              <List.Item.Meta description={item.label} />
            </List.Item>
          )}
        />
      </Row>
      <Row style={{ marginTop: '16px' }}>
        <List
          bordered
          dataSource={data}
          renderItem={(item: any) => (
            <List.Item>
              <List.Item.Meta description={item.label} />
            </List.Item>
          )}
        />
      </Row>
      <Row style={{ marginTop: '16px' }}>
        <List
          bordered
          dataSource={data3}
          size="large"
          renderItem={(item: any) => (
            <List.Item>
              <List.Item.Meta description={item.label} />
            </List.Item>
          )}
        />
      </Row>
    </>
  );
};