Horizontal timeline with leading labels

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

const projectJourney = [
  { id: 1, date: "Oct 2024", title: "Kickoff", description: "Defining project goals and core team selection." },
  { id: 2, date: "Nov 2024", title: "Discovery", description: "User research and requirements gathering phase." },
  { id: 3, date: "Dec 2024", title: "Implementation", description: "Core development and sprint execution." },
]
</script>

<template>
  <Timeline :value="2" orientation="horizontal" class="w-full max-w-xl">
    <TimelineItem
      v-for="item in projectJourney"
      :key="item.id"
      :step="item.id"
      class="group-data-[orientation=horizontal]/timeline:mt-0"
    >
      <TimelineHeader>
        <TimelineSeparator class="group-data-[orientation=horizontal]/timeline:top-8" />
        <TimelineDate class="mb-10">{{ item.date }}</TimelineDate>
        <TimelineTitle>{{ item.title }}</TimelineTitle>
        <TimelineIndicator class="group-data-[orientation=horizontal]/timeline:top-8" />
      </TimelineHeader>
      <TimelineContent>{{ item.description }}</TimelineContent>
    </TimelineItem>
  </Timeline>
</template>