<!-- cd-timeline Start-->
<app-card [header]="true" [body]="true" [cardClass]="'height-equal'" [cardBodyClass]="'dark-timeline'">
    <h5 header>Basic Timeline </h5>
    <p header class="f-m-light mt-1">
        Use the <code>.main-basic-timeline </code>class through made basic timeline.</p>
    <ul body>
        @for (data of basicTimelineData; track data) {
        <li class="d-flex">
            <div class="timeline-dot-{{data.dotClass}}"></div>
            <div class="w-100 ms-3">
                <p class="d-flex justify-content-between mb-2"><span
                        class="date-content light-background">{{data.date}}</span><span>{{data.time}}</span></p>
                <h6>{{data.title}}<span class="dot-notification"></span></h6>
                <p class="f-light">{{data.desc}}</p>
            </div>
        </li>
        }
    </ul>
</app-card>

<!-- ts file-->
import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/bonus-ui/timeline';
import { CardComponent } from "../../../../shared/components/card/card.component";

@Component({
    selector: 'app-basic-timeline',
    templateUrl: './basic-timeline.component.html',
    styleUrls: ['./basic-timeline.component.scss'],
    imports: [CardComponent]
})

export class BasicTimelineComponent {

  public basicTimelineData = Data.basicTimelineData;

}

<!-- data file-->
export const basicTimelineData = [
    {
        dotClass : 'primary',
        date : '2 Feb 2024',
        time : '7:00 AM',
        title : 'CONFERENCE WITH CLIENT',
        desc : 'At noon today, there will be a meeting with a UK client.',
    },
    {
        dotClass : 'secondary',
        date : '22 March 2024',
        time : '3:45 PM',
        title : 'DISCUSSION WITH MARKETING TEAM',
        desc : 'discussion with the marketing staff on the success of the most recent project',
    },
    {
        dotClass : 'success',
        date : '16 May 2024',
        time : '1:22 AM',
        title : 'INVEST IN A NEW HOSTING PLAN',
        desc : 'today at 2 pm AM, purchase a new hosting package as agreed upon with the management team.',
    },
    {
        dotClass : 'warning',
        date : '23 Nov 2024',
        time : '6:56 AM',
        title : 'DISCUSSION WITH DESIGNER TEAM',
        desc : 'discussion with the designer employee on the success of the most recent project.',
    },
    {
        dotClass : 'info',
        date : '12 Dec 2024',
        time : '12:05 AM',
        title : 'DISCUSSION WITH NEW THEME LAUNCH',
        desc : 'discussion with the how many themes made in our portfolio.',
    },
    {
        dotClass : 'danger',
        date : '02 Jan 2024',
        time : '6:56 AM',
        title : 'PURCHASE NEW CHAIRS FOR OFFICE ',
        desc : 'online purchase new chairs for office',
    },
]