# TimelineItem

> One entry of a composed `Timeline`.

Source: https://ui.jcsoftdev.com/docs/components/timeline-item

One entry of a composed `Timeline`. Extra content goes in `children`.

## Import

```ts
import { TimelineItem } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/timeline`.

## Usage

```tsx
<TimelineItem items={items} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  | Kept so a `TimelineFeedItem` can be spread as is; React uses it as the key. |
| `time` | `string` |  | Display time, e.g. "Hace 5 min" or "14:30". |
| `title` * | `ReactNode` |  |  |
| `children` | `ReactNode` |  | Extra content under the text: attachments, chips, actions. |
| `group` | `string` |  | Items with the same `group` sit under one heading (e.g. "Hoy"). |
| `status` | `"done" \| "error" \| "pending" \| "current"` |  | Process state. `done` and `error` get a check or cross and a spoken state, `current` sets `aria-current="step"` and rings the marker, `pending` dims the item. Independent of `tone`. |
| `icon` | `ReactNode` |  | Icon inside the marker; without it the marker is a dot (a check or cross for `done` and `error`). |
| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger"` |  | Marker colour. Without it the tone follows `status`, or is neutral. |
| `dateTime` | `string` |  | Machine-readable value for the `<time>` element. |
| `description` | `ReactNode` |  |  |
| `actor` | `string` |  | Person or system that did it. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-timeline--default)
- [Ungrouped](/storybook/?path=/story/containers-timeline--ungrouped)
- [Narrow](/storybook/?path=/story/containers-timeline--narrow)
- [Brutal Preset](/storybook/?path=/story/containers-timeline--brutal-preset)
- [Statuses](/storybook/?path=/story/containers-timeline--statuses)
- [Composed](/storybook/?path=/story/containers-timeline--composed)

## Source

`packages/ui/src/containers/timeline/timeline.tsx`