Vertical timeline

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

const releaseCycle = [
  { id: 1, date: "Week 1", title: "Planning", description: "Scope definition and resource planning." },
  { id: 2, date: "Week 2", title: "Design", description: "UI/UX design and prototyping." },
  { id: 3, date: "Week 4", title: "Development", description: "Core features implementation." },
]
</script>

<template>
  <Timeline :value="2" orientation="horizontal" class="w-full max-w-xl">
    <TimelineItem v-for="item in releaseCycle" :key="item.id" :step="item.id">
      <TimelineHeader>
        <TimelineSeparator />
        <TimelineDate>{{ item.date }}</TimelineDate>
        <TimelineTitle>{{ item.title }}</TimelineTitle>
        <TimelineIndicator />
      </TimelineHeader>
      <TimelineContent>{{ item.description }}</TimelineContent>
    </TimelineItem>
  </Timeline>
</template>