import './demo4.css';
import Card from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Tag } from '../..';

ReactDOM.render(
  <div>
    <Card className="free-card custom" free direction="horizontal">
      <Card.Media>
        <img
          style={{ width: '180px', height: '180px' }}
          src="https://img.alicdn.com/imgextra/i1/O1CN01nDjiPD1gVNBnsx0BQ_!!6000000004147-0-tps-512-512.jpg"
        />
      </Card.Media>
      <div className="free-card-main">
        <Card.Header
          title="Title"
          subTitle="Sub Title"
          extra={
            <>
              <a href="#111" style={{ marginRight: '16px' }}>
                {' '}
                                编辑{' '}
              </a>
              <span>|</span>
              <a href="#222" style={{ marginLeft: '16px' }}>
                {' '}
                                订阅{' '}
              </a>
            </>
          }
        />
        <Card.Content>
                    Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et.
          <div style={{ marginTop: '12px' }}>
            <Tag style={{ marginRight: '8px' }}>标签</Tag>
            <Tag style={{ marginRight: '8px' }}>标签</Tag>
            <Tag>标签</Tag>
          </div>
          <p style={{ marginTop: '14px', color: '#a6a6a6' }}>
                        2020.03.24 10:44
          </p>
        </Card.Content>
        <Card.Actions btnActions={[ 'ok' ]}></Card.Actions>
      </div>
    </Card>
  </div>,
  document.getElementById('card-demo-4'),
);