import './demo1.css';
import List from '..';
import React from 'react';
import ReactDOM from 'react-dom';

const data = [
  {
    title: 'A Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
  {
    title: 'B Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$10',
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
  {
    title: 'Title',
    img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
    money: '$20',
  },
];

ReactDOM.render(
  <div style={{ width: 620, padding: 20 }}>
    <p> 只带标题的用法，通过size='large' | 'medium' | 'small'来区分尺寸，具体为line-height的区别 </p>
    <List size="small" >
      <List.Item>标题</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>底部</List.Item>
    </List>

    <br />
    <br />
    <List size="medium">
      <List.Item>标题</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>底部</List.Item>
    </List>

    <br />
    <br />

    <List size="large">
      <List.Item>标题</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>阿里云设计中心</List.Item>
      <List.Item>底部</List.Item>
    </List>

    <p> 带头像的用法，通过avatarImg输入头像对应图片，带图像的list不用传入size，默认一种尺寸 </p>
    <List
      header={<div>Notifications</div>}
      dataSource={data}
      renderItem={(item, i) => (
        <List.Item
          key={i}
          extra={item.money}
          title={item.title}
          avatarImg = {item.img}
        >
          List Item {i}
        </List.Item>
      )}
    />

  </div>,
  document.getElementById('list-demo-1'),
);