<div class="card height-equal">
    <div class="card-header pb-0">
        <h4>Basic Timeline </h4>
        <p class="f-m-light mt-1">
            Use <code>timeline-dot-*</code> class to a square style timeline.</p>
    </div>
    <div class="card-body dark-timeline basic-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 class="mb-0">{{data.title}}<span class="dot-notification"></span></h6>
                    <p class="f-light">{{data.desc}}</p>
                </div>
            </li>
            }
        </ul>
    </div>
</div>

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',
    },
]

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

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

export class BasicTimeline {

  public basicTimelineData = Data.basicTimelineData;

}