<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 (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>
    </div>
</div>

import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/data/bonus-ui/timeline';

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

export class BasicTimelineComponent {

  public basicTimelineData = Data.basicTimelineData;

}

export const basicTimelineData = [
    {
        dotClass : 'primary',
        date : '2 Feb 2023',
        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 2023',
        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 2023',
        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 2023',
        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 2023',
        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',
    },
]