Compact horizontal milestone timeline

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "check"/"play"/"circle") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Badge } from "@/components/reui/badge"
import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from "@/components/reui/timeline"
import { cn } from "@/lib/utils"

const releases = [
  { id: 1, version: "v1.0", date: "Jan 2025", title: "Initial Release", status: "released" },
  { id: 2, version: "v1.1", date: "Mar 2025", title: "Bug Fixes", status: "released" },
  { id: 3, version: "v2.0", date: "Jun 2025", title: "Major Update", status: "current" },
  { id: 4, version: "v2.1", date: "Sep 2025", title: "Improvements", status: "upcoming" },
]
</script>

<template>
  <Timeline :value="3" orientation="horizontal" class="w-full max-w-xl">
    <TimelineItem v-for="release in releases" :key="release.id" :step="release.id">
      <TimelineHeader>
        <TimelineSeparator class="bg-input! group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-2.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-2.25rem)]" />
        <TimelineDate>{{ release.date }}</TimelineDate>
        <TimelineTitle class="flex items-center gap-2">
          {{ release.version }}
          <Badge v-if="release.status === 'current'" variant="primary-light" size="sm">Current</Badge>
        </TimelineTitle>
        <TimelineIndicator
          :class="
            cn(
              'flex size-6 items-center justify-center border-none',
              release.status === 'released' && 'bg-emerald-500 text-white',
              release.status === 'current' && 'bg-primary text-primary-foreground',
              release.status === 'upcoming' && 'bg-muted text-muted-foreground'
            )
          "
        >
          <svg
            v-if="release.status === 'released'"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-check size-3.5"
          >
            <path d="M20 6 9 17l-5-5" />
          </svg>
          <svg
            v-else-if="release.status === 'current'"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-play size-3"
          >
            <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" />
          </svg>
          <svg
            v-else
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-circle size-3"
          >
            <circle cx="12" cy="12" r="10" />
          </svg>
        </TimelineIndicator>
      </TimelineHeader>
      <TimelineContent class="text-xs">{{ release.title }}</TimelineContent>
    </TimelineItem>
  </Timeline>
</template>