Timeline with git activity.

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

<template>
  <Timeline :value="3" class="w-full max-w-md">
    <TimelineItem :step="1" class="group-data-[orientation=vertical]/timeline:ms-10">
      <TimelineHeader>
        <TimelineSeparator class="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" />
        <TimelineTitle class="mt-0.5">Forked Repository</TimelineTitle>
        <TimelineIndicator class="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
          <svg
            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-git-fork size-4"
          >
            <circle cx="12" cy="18" r="3" />
            <circle cx="6" cy="6" r="3" />
            <circle cx="18" cy="6" r="3" />
            <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
            <path d="M12 12v3" />
          </svg>
        </TimelineIndicator>
      </TimelineHeader>
      <TimelineContent>
        Forked the repository to create a new branch for development.
        <TimelineDate class="mt-2 mb-0">15 minutes ago</TimelineDate>
      </TimelineContent>
    </TimelineItem>

    <TimelineItem :step="2" class="group-data-[orientation=vertical]/timeline:ms-10">
      <TimelineHeader>
        <TimelineSeparator class="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" />
        <TimelineTitle class="mt-0.5">Pull Request Submitted</TimelineTitle>
        <TimelineIndicator class="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
          <svg
            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-git-pull-request-arrow size-3.5"
          >
            <circle cx="5" cy="6" r="3" />
            <path d="M5 9v12" />
            <circle cx="19" cy="18" r="3" />
            <path d="m15 9-3-3 3-3" />
            <path d="M12 6h5a2 2 0 0 1 2 2v7" />
          </svg>
        </TimelineIndicator>
      </TimelineHeader>
      <TimelineContent>
        Submitted PR #342 with new feature implementation. Waiting for code review.
        <TimelineDate class="mt-2 mb-0">10 minutes ago</TimelineDate>
      </TimelineContent>
    </TimelineItem>

    <TimelineItem :step="3" class="group-data-[orientation=vertical]/timeline:ms-10">
      <TimelineHeader>
        <TimelineSeparator class="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" />
        <TimelineTitle class="mt-0.5">Comparing Branches</TimelineTitle>
        <TimelineIndicator class="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
          <svg
            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-git-compare-arrows size-3.5"
          >
            <circle cx="5" cy="6" r="3" />
            <path d="M12 6h5a2 2 0 0 1 2 2v7" />
            <path d="m15 9-3-3 3-3" />
            <circle cx="19" cy="18" r="3" />
            <path d="M12 18H7a2 2 0 0 1-2-2V9" />
            <path d="m9 15 3 3-3 3" />
          </svg>
        </TimelineIndicator>
      </TimelineHeader>
      <TimelineContent>
        Received comments on PR. Minor adjustments needed in error handling.
        <TimelineDate class="mt-2 mb-0">5 minutes ago</TimelineDate>
      </TimelineContent>
    </TimelineItem>

    <TimelineItem :step="4" class="group-data-[orientation=vertical]/timeline:ms-10">
      <TimelineHeader>
        <TimelineSeparator class="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" />
        <TimelineTitle class="mt-0.5">Merged Branch</TimelineTitle>
        <TimelineIndicator class="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
          <svg
            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-git-merge size-3.5"
          >
            <circle cx="18" cy="18" r="3" />
            <circle cx="6" cy="6" r="3" />
            <path d="M6 21V9a9 9 0 0 0 9 9" />
          </svg>
        </TimelineIndicator>
      </TimelineHeader>
      <TimelineContent>
        Merged the feature branch into the main branch. Ready for deployment.
        <TimelineDate class="mt-2 mb-0">Just now</TimelineDate>
      </TimelineContent>
    </TimelineItem>
  </Timeline>
</template>