import React from "react";
import { Timeline, Button, MediaObject, Text } from "@tencent/tea-component";

export default function TimelineVerticalExample() {
  return (
    <Timeline mode="vertical" end={<Button>操作按钮</Button>}>
      <Timeline.Item label="2020-02-02" title="事件一" collapsable>
        新特性发布
      </Timeline.Item>
      <Timeline.Item
        label="2020-02-03"
        title="事件二"
        collapsable
        defaultCollapsed
      >
        新特性发布
      </Timeline.Item>
      <Timeline.Item label="2020-02-04" title="事件三">
        新特性发布
      </Timeline.Item>
      <Timeline.Item label="2020-02-05" title="事件四">
        <MediaObject
          reverse
          media={<img src="//placehold.it/64x64" alt="Generic placeholder" />}
        >
          <Text theme="label">
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla.
          </Text>
        </MediaObject>
      </Timeline.Item>
    </Timeline>
  );
}