Basic timeline.

<script setup lang="ts">
import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from "@/components/reui/timeline"
</script>

<template>
  <Timeline :value="2" class="w-full max-w-md">
    <TimelineItem :step="1">
      <TimelineHeader>
        <TimelineDate>March 2024</TimelineDate>
        <TimelineTitle>Project Initialized</TimelineTitle>
      </TimelineHeader>
      <TimelineIndicator />
      <TimelineSeparator />
      <TimelineContent>
        Successfully set up the project repository and initial architecture.
      </TimelineContent>
    </TimelineItem>

    <TimelineItem :step="2">
      <TimelineHeader>
        <TimelineDate>April 2024</TimelineDate>
        <TimelineTitle>Beta Release</TimelineTitle>
      </TimelineHeader>
      <TimelineIndicator />
      <TimelineSeparator />
      <TimelineContent>
        Launched the beta version for early testers and feedback.
      </TimelineContent>
    </TimelineItem>

    <TimelineItem :step="3">
      <TimelineHeader>
        <TimelineDate>June 2024</TimelineDate>
        <TimelineTitle>Official Launch</TimelineTitle>
      </TimelineHeader>
      <TimelineIndicator />
      <TimelineSeparator />
      <TimelineContent>
        The platform is now live for all users worldwide.
      </TimelineContent>
    </TimelineItem>
  </Timeline>
</template>