<!-- timeline Start-->
<div class="card height-equal">
    <div class="card-header">
        <h4>Basic Timeline </h4>
        <p class="f-m-light mt-1">
            Use the <code>.main-basic-timeline </code>class through made basic timeline.</p>
    </div>
    <div class="card-body dark-timeline">
        <ul>
            @for(timelineItem of basictimelineData; track timelineItem){
            <li class="d-flex">
                <div class="timeline-dot-{{timelineItem.class}}"></div>
                <div class="w-100 ms-3">
                    <p class="d-flex justify-content-between mb-2" [innerHTML]="timelineItem.time"></p>
                    <h6>{{timelineItem.title}}<span class="dot-notification"></span></h6>
                    <p class="f-light">{{timelineItem.dis}}</p>
                </div>
            </li>
        }
        </ul>
    </div>
</div>

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

<!-- ts file-->
import { Component } from '@angular/core';
import { basicTimeline } from '../../../../shared/data/bonus-ui/timeline';

@Component({
    selector: 'app-basic-timeline',
    templateUrl: './basic-timeline.component.html',
    styleUrls: ['./basic-timeline.component.scss'],
    import:[]
})
export class BasicTimelineComponent {

  public basictimelineData = basicTimeline;

}