Deployment log timeline

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "check"/"x") — см. 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 deployments = [
  { id: 1, title: "Production Deploy", date: "2 minutes ago", commit: "a1b2c3d", branch: "main", status: "success", duration: "42s" },
  { id: 2, title: "Staging Deploy", date: "15 minutes ago", commit: "e4f5g6h", branch: "staging", status: "success", duration: "38s" },
  { id: 3, title: "Preview Deploy", date: "1 hour ago", commit: "i7j8k9l", branch: "feat/auth", status: "failed", duration: "1m 12s" },
  { id: 4, title: "Production Deploy", date: "3 hours ago", commit: "m0n1o2p", branch: "main", status: "success", duration: "45s" },
]
</script>

<template>
  <div class="w-full max-w-xs">
    <Timeline :value="4">
      <TimelineItem
        v-for="deploy in deployments"
        :key="deploy.id"
        :step="deploy.id"
        class="group-data-[orientation=vertical]/timeline:ms-10"
      >
        <TimelineHeader>
          <TimelineSeparator class="bg-input! group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-6.5" />
          <div class="flex items-center gap-2">
            <TimelineTitle class="text-sm">{{ deploy.title }}</TimelineTitle>
            <Badge :variant="deploy.status === 'success' ? 'success-light' : 'destructive-light'" size="sm">
              {{ deploy.status }}
            </Badge>
          </div>
          <TimelineIndicator
            :class="
              cn(
                'flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7',
                deploy.status === 'success' ? 'bg-emerald-500 text-white' : 'bg-destructive text-white'
              )
            "
          >
            <svg
              v-if="deploy.status === 'success'"
              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
              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-x size-3.5"
            >
              <path d="M18 6 6 18" />
              <path d="m6 6 12 12" />
            </svg>
          </TimelineIndicator>
        </TimelineHeader>
        <TimelineContent>
          <div class="text-muted-foreground flex items-center gap-3 text-xs">
            <span class="font-mono">{{ deploy.commit }}</span>
            <span>&middot;</span>
            <span>{{ deploy.branch }}</span>
            <span>&middot;</span>
            <span>{{ deploy.duration }}</span>
          </div>
          <TimelineDate class="mt-1 mb-0">{{ deploy.date }}</TimelineDate>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  </div>
</template>