npm package: @licuido-ui/ui_time-line
Description: The timeline displays a list of events in chronological order.
Latest version: 2.0.1

# TimeLine

The timeline displays a list of events in chronological order.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link Time line](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui//ui_time-line
```

## Import component

```jsx
import { TimeLine } from '@licuido-ui//ui_time-line';
```

## Usage

```jsx
<TimeLine timeLineData={[]} />
```

## Image

![alt text](./timeLine.png)

## Sample Code

```jsx
<TimeLine
  variation2={false}
  rootStyle={{}}
  timeLinePosition={'right'}
  TimelineConnectorColor={''}
  TimelineConnectorWidth={2}
  TimelineDotProfileUrlHeight={24}
  TimelineDotProfileUrlWidth={24}
  TimelineDotProfileUrlRadius={1}
  TimelineDotVariant={'filled'}
  TimelineDotHeight={1.2}
  TimelineDotWidth={1.2}
  TimelineDotColor={'#929292'}
  TimelineDotBorder={''}
  profileUrlHeight={24}
  profileUrlWidth={24}
  profileUrlRadius={5}
  cardWidth={0}
  cardMinWidth={212}
  cardMaxWidth={0}
  cardMaxHeight={0}
  cardMinHeight={130}
  cardHeight={0}
  CardBackground={'#FFFFFF'}
  CardHoverStyle={{}}
  CardStyle={{}}
  hoverBorderStyle={''}
  hoverBgColor={'#EEEE'}
  text1Size={10}
  text1Color={'#929292'}
  text2Size={12}
  text2Color={'#3B3B3B'}
  text3Size={10}
  text3Color={'#929292'}
  text1Styles={{}}
  text2Styles={{}}
  text3Styles={{}}
  handleClick={() => false}
  profileComponentContainer={{}}
  timeLineData={[
  {
      id: 1,
      text1: '18 Mins ago',
      text2: 'Elit convallis',
      text3: 'invited you',
      profileComponent: '',
        profileUrl:
          'https://cdna.artstation.com/p/assets/images/images/053/054/138/large/avetetsuya-studios-alien.jpg?1661309922',
    },
    {
      id: 2,
      text1: '18 Mins ago',
      text2:
        'Duis mauris augue, efficitur eu arcu sit amet, posuere dignissim neque. Aenean enim sem, pharetra et magna sit amet, luctus aliquet nibh.',
      text3: '',
      profileComponent: '',
      profileUrl:
        'https://cdna.artstation.com/p/assets/images/images/053/054/138/large/avetetsuya-studios-alien.jpg?1661309922',
    },]}
/>
```

## Props

| **Name**                        | **Description**                                                                                                     | **Default**      | **Control**                                        |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------------------------------- |
| **variant**                     | "basic" `or` "withProfile"                                                                                          | basic            | basic                                              |
| **rootStyle**                   |                                                                                                                     | {}               | rootStyle : \{\}                                   |
| **timeLinePosition**            | "left" `or` "right"                                                                                                 | right            | right                                              |
| **TimelineConnectorColor**      | string                                                                                                              | #fd2d2           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))  |
| **TimelineConnectorWidth**      | number                                                                                                              | 200              | -                                                  |
| **TimelineDotProfileUrlHeight** | number                                                                                                              | 300              | -                                                  |
| **TimelineDotProfileUrlWidth**  | number                                                                                                              | 150              | -                                                  |
| **TimelineDotProfileUrlRadius** | number                                                                                                              | 150              | -                                                  |
| **TimelineDotVariant**          | "filled" `or` "outlined"                                                                                            | "filled"         | filled                                             |
| **TimelineDotHeight**           | number                                                                                                              | 20               | -                                                  |
| **TimelineDotWidth**            | number                                                                                                              | 20               | -                                                  |
| **TimelineDotColor**            | string                                                                                                              | #fd2d2           | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))  |
| **TimelineDotBorder**           | string                                                                                                              | 1px solid #fd2d2 |
| **profileUrlHeight**            | number                                                                                                              | 30               | -                                                  |
| **profileUrlWidth**             | number                                                                                                              | 40               | -                                                  |
| **profileUrlRadius**            | number                                                                                                              | 20               | -                                                  |
| **cardWidth**                   | number                                                                                                              | 30               | -                                                  |
|                                 |
| **cardMinWidth**                | number                                                                                                              | 20               | -                                                  |
| **cardMaxWidth**                | number                                                                                                              | 30               | -                                                  |
| **cardMaxHeight**               | number                                                                                                              | 40               | -                                                  |
| **cardMinHeight**               | number                                                                                                              | 39               | -                                                  |
| **cardHeight**                  | number                                                                                                              | 20               | -                                                  |
| **CardBackground**              | string                                                                                                              | \-               | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **CardHoverStyle**              | SxProps&lt;\{\}&gt;                                                                                                 | {}               | CardHoverStyle : \{\}                              |
| **CardStyle**                   | SxProps&lt;\{\}&gt;                                                                                                 | {}               | CardStyle : \{\}                                   |
| **hoverBorderStyle**            | string                                                                                                              | \-               |
| **hoverBgColor**                | string                                                                                                              | \-               | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **text1Size**                   | number                                                                                                              | \-               |
| **text1Color**                  | string                                                                                                              | \-               | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **text2Size**                   | number                                                                                                              | \-               |
| **text2Color**                  | string                                                                                                              | \-               | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **text3Size**                   | number                                                                                                              | \-               |
| **text3Color**                  | string                                                                                                              | \-               | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **text1Styles**                 | SxProps&lt;\{\}&gt;                                                                                                 | \-               | text1Styles : \{\}                                 |
| **text2Styles**                 | SxProps&lt;\{\}&gt;                                                                                                 | \-               | text2Styles : \{\}                                 |
| **text3Styles**                 | SxProps&lt;\{\}&gt;                                                                                                 | \-               | text3Styles : \{\}                                 |
| **handleClick**                 | \(\)=&gt;\{\}\(\) =&gt; void                                                                                        | \-               | \-                                                 |
| **profileComponentContainer**   | SxProps&lt;\{\}&gt;                                                                                                 | \-               | profileComponentContainer : \{\}                   |
| **timeLineData**                | \{ id: number; text1: string; text2: string; text3: string; profileComponent: ReactNode; profileUrl: string; \}\[\] | []               | []                                                 |
| **className**                   | string                                                                                                              | \-               | Set string                                         |
| **id**                          | string                                                                                                              | string           | string                                             |
| **sx**                          | SxProps&lt;Theme&gt;                                                                                                | \-               | Set                                                |