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

export default () => {
  const data = [
    { title: '列表标题', label: '内容列表内容列表内容列表内容', key: 'a1' },
  ];

  return (
    <>
      <Row>
        <List
          bordered
          dataSource={data}
          renderItem={(item: any) => (
            <List.Item
              actions={[
                <Button
                  key="a"
                  className="list-action-w"
                  textColor="var(--primary-6)"
                  type="text"
                >
                  操作
                </Button>,
                <Button
                  key="b"
                  className="list-action-w"
                  textColor="var(--primary-6)"
                  type="text"
                >
                  操作
                </Button>,
              ]}
            >
              <List.Item.Meta
                avatar={<div className="list-image"></div>}
                title={item.title}
                description={item.label}
              />
            </List.Item>
          )}
        />
      </Row>
      <Row style={{ paddingTop: '16px' }}>
        <List
          bordered
          dataSource={data}
          renderItem={(item: any) => (
            <List.Item
              actions={[
                <Button
                  key="c"
                  type="text"
                  textColor="#808080"
                  icon={<Icon iconName="Edit"></Icon>}
                ></Button>,
                <Button
                  key="d"
                  type="text"
                  textColor="#808080"
                  icon={<Icon iconName="Delete"></Icon>}
                ></Button>,
              ]}
            >
              <List.Item.Meta
                avatar={<div className="list-image"></div>}
                title={item.title}
                description={item.label}
              />
            </List.Item>
          )}
        />
      </Row>
    </>
  );
};