Timeline

<x-timeline fix :events="$events">
  @foreach($component->events as $event)
	<x-timeline-event :icon="$event['year'] < intval(date('Y')) ? 'heroicon-m-check-circle' : null">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>



<x-timeline fix :events="$events" vertical icons-start>
  @foreach($component->events as $i => $event)
  <x-timeline-event :swapped="($i % 2) == 1" :icon="$event['year'] < intval(date('Y')) ? 'heroicon-m-check-circle' : null">
	<x-slot:start @class(['text-end' => ($i % 2) == 0])>
	  <span class="font-normal italic">{{ $event['year'] }}</span><br/>
	  <span class="font-normal text-xl">{{ $event['event'] }}</span><br/>
	  <span class="text-sm block text-justify" @style(['text-align-last: end' => ($i % 2) == 0])>{{ $event['description'] }}</span>
	</x-slot:start>
  </x-timeline-event>
  @endforeach
</x-timeline>

events = [
  [
	'year' => 1984,
	'event' => 'First Macintosh computer',
	'description' => 'The Apple Macintosh — later rebranded as the Macintosh 128K — is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse.'
  ], [
	'year' => 1998,
	'event' => 'iMac',
	'description' => 'iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple\'s consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms.'
  ], [
	'year' => 2001,
	'event' => 'iPod',
	'description' => 'The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple.'
  ], [
	'year' => 2007,
	'event' => 'iPhone',
	'description' => 'iPhone is a line of smartphones produced by Apple Inc. that use Apple\'s own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share.'
  ], [
	'year' => 2015,
	'event' => 'Apple Watch',
	'description' => 'The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness tracking, health-oriented capabilities, and wireless telecommunication, and integrates with iOS and other Apple products and services.'
  ], [
	'year' => 2039,
	'event' => 'eyeNanobots',
	'description' => 'The eyeNanobots, a pun referencing their previous iMac, iPod and iPhone brands, is a series of self-sustaining nanobots. Originally intended for medical purpose, it allowed Apple to plant an extensive security system into everyone\'s body while being paid for it, and control zombie-like customers.'
  ]
];

<x-timeline :events="$events">
  @foreach($component->events as $i => $event)
  	@if (($i % 2) == 0)
	  <x-timeline-event :icon="$event['year'] < intval(date('Y')) ? 'heroicon-m-check-circle' : null">
		<x-slot:start>{{ $event['year'] }}</x-slot:start>	  
		<x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	  </x-timeline-event>
    @else
  	  <x-timeline-event :icon="$event['year'] < intval(date('Y')) ? 'heroicon-m-check-circle' : null">
		<x-slot:end>{{ $event['year'] }}</x-slot:end>	  
		<x-slot:start class="timeline-box">{{ $event['event'] }}</x-slot:start>
	  </x-timeline-event>
    @endif
  @endforeach
</x-timeline>

<x-timeline :events="$events">
  @foreach($component->events as  $i => $event)
	<x-timeline-event :swapped="($i % 2) == 1" :icon="$event['year'] < intval(date('Y')) ? 'heroicon-m-check-circle' : null">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>

events = [
  [
	'year' => 1984,
	'event' => 'First Macintosh computer'
  ], [
	'year' => 1998,
	'event' => 'iMac'
  ], [
	'year' => 2001,
	'event' => 'iPod'
  ], [
	'year' => 2007,
	'event' => 'iPhone'
  ], [
	'year' => 2015,
	'event' => 'Apple Watch'
  ]
];

<x-timeline :events="$events">
  @foreach($component->events as $event)
  	<x-timeline-event :start="$event['year']" :end="$event['event']"/>
  @endforeach
</x-timeline>

<x-timeline fix :events="$events" vertical>
  @foreach($component->events as $event)
  	<x-timeline-event :start="$event['year']" :end="$event['event']"/>
  @endforeach
</x-timeline>

events = [
  [
	'year' => 1984,
	'event' => 'First Macintosh computer'
  ], [
	'year' => 1998,
	'event' => 'iMac'
  ], [
	'year' => 2001,
	'event' => 'iPod'
  ], [
	'year' => 2007,
	'event' => 'iPhone'
  ], [
	'year' => 2015,
	'event' => 'Apple Watch'
  ]
];

<x-timeline :events="$events" class="timeline-vertical lg:timeline-horizontal">
  @foreach($component->events as $event)
	<x-timeline-event icon="heroicon-m-check-circle">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>

events = [
  [
	'year' => 1984,
	'event' => 'First Macintosh computer'
  ], [
	'year' => 1998,
	'event' => 'iMac'
  ], [
	'year' => 2001,
	'event' => 'iPod'
  ], [
	'year' => 2007,
	'event' => 'iPhone'
  ], [
	'year' => 2015,
	'event' => 'Apple Watch'
  ]
];

<x-timeline :events="$events">
  @foreach($component->events as $event)
	<x-timeline-event icon="heroicon-m-check-circle">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>

<x-timeline :events="$events" icons-start>
  @foreach($component->events as $event)
	<x-timeline-event icon="heroicon-m-check-circle">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>

<x-timeline vertical :events="$events">
  @foreach($component->events as $event)
	<x-timeline-event icon="heroicon-m-check-circle">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>



<x-timeline vertical :events="$events" icons-start>
  @foreach($component->events as $event)
	<x-timeline-event icon="heroicon-m-check-circle">
	  <x-slot:start>{{ $event['year'] }}</x-slot:start>	  
	  <x-slot:end class="timeline-box">{{ $event['event'] }}</x-slot:end>
	</x-timeline-event>
  @endforeach
</x-timeline>

events = [
  [
	'year' => 1984,
	'event' => 'First Macintosh computer'
  ], [
	'year' => 1998,
	'event' => 'iMac'
  ], [
	'year' => 2001,
	'event' => 'iPod'
  ], [
	'year' => 2007,
	'event' => 'iPhone'
  ], [
	'year' => 2015,
	'event' => 'Apple Watch'
  ]
];