cnd-components-mcp/componentData/components/Timeline/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

### 基础形态
```tsx
import React from 'react';
import { Timeline } from '@alicloud/console-components';

const { Item: TimelineItem } = Timeline;

const dataSource = [
  {
    id: 1,
    title: '2024-08-08',
    state: 'process',
    content: '时间信息或者补充描述',
  },
  {
    id: 2,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
  {
    id: 3,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
  {
    id: 4,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
  {
    id: 5,
    title: '2024-08-08',
    state: 'done',
    content: '时间信息或者补充描述',
  },
] as const;

export default () => {
  return (
    <div>
      <Timeline>
        {
          dataSource.map((item) => {
            const { id, ...restProps } = item;

            return (
              <TimelineItem
                key={id}
                {...restProps}
              />
            );
          })
        }
      &lt;/Timeline&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '显示时间或补充描述',
  describe: '',
};

```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```