import React from 'react';
import { Typography, Divider } from 'antd';
import List from '../index';

const data = [
  '光谷智慧园一期泵房',
  '光谷智慧园一期泵房',
  '光谷智慧园一期泵房',
  '光谷金融港一期水厂',
  '光谷金融港二期水厂',
];

export default () => {
  return (
    <>
      <Divider orientation="left">Default Size</Divider>
      <List
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={data}
        renderItem={(item, index) => (
          <List.Item key={index}>
            <Typography.Text mark>[ITEM]</Typography.Text> {item}
          </List.Item>
        )}
      />
      <Divider orientation="left">Small Size</Divider>
      <List
        size="small"
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={data}
        renderItem={(item) => <List.Item>{item}</List.Item>}
      />
      <Divider orientation="left">Large Size</Divider>
      <List
        size="large"
        header={<div>Header</div>}
        footer={<div>Footer</div>}
        bordered
        dataSource={data}
        renderItem={(item) => <List.Item>{item}</List.Item>}
      />
    </>
  );
};