Timeline with roadmap items.

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

const roadmapItems = [
  { status: "Completed", text: "Beta Program", date: "Dec 15, 2025", color: "bg-emerald-500" },
  { status: "Completed", text: "Usability Testing", date: "Nov 01, 2025", color: "bg-violet-500" },
  { status: "Initiated", text: "Design Phase", date: "Oct 15, 2025", color: "bg-fuchsia-500" },
  { status: "Completed", text: "Requirements Gathering", date: "Aug 01, 2024", color: "bg-blue-500" },
  { status: "Started", text: "Project Kickoff", date: "Jul 15, 2024", color: "bg-red-500" },
]
</script>

<template>
  <div class="w-full max-w-xs">
    <Timeline :value="0" class="gap-2.5">
      <TimelineItem
        v-for="(item, index) in roadmapItems"
        :key="index"
        :step="index + 1"
        class="has-[+[data-completed]]:[&_[data-slot=timeline-separator]]:bg-foreground/20 group-data-[orientation=vertical]/timeline:not-last:pb-0"
      >
        <TimelineHeader class="flex items-center gap-2.5">
          <TimelineSeparator class="" />
          <TimelineIndicator :class="cn('size-2 border-none', item.color)" />
          <TimelineDate class="text-muted-foreground/60 mb-0 text-[10px] font-semibold uppercase">
            {{ item.date }}
          </TimelineDate>
        </TimelineHeader>
        <TimelineContent class="text-foreground text-sm font-medium">
          <span class="text-muted-foreground">{{ item.status }}</span> {{ item.text }}
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  </div>
</template>