Timeline

<.timeline>
  <:item time="2 hours ago">
    <h4>Deployed v2.4</h4>
    <p>Pushed to production, all checks green.</p>
  </:item>
  <:item time="4 hours ago">
    <h4>Merged PR #342</h4>
    <p>Refactored auth module for better testability.</p>
  </:item>
  <:item time="Yesterday">
    <h4>Draft saved</h4>
    <p>Auto-save captured the latest edits.</p>
  </:item>
</.timeline>

<.timeline>
  <:item time="2 hours ago" icon="🚀">
    <h4>Deployed v2.4</h4>
    <p>Pushed to production, all checks green.</p>
  </:item>
  <:item time="Yesterday" icon="📝">
    <h4>Draft saved</h4>
  </:item>
  <:item time="3 days ago" icon="✅">
    <h4>Tests passing</h4>
    <p>All component checks are green on CI.</p>
  </:item>
</.timeline>

<.timeline>
  <:marker>
    <span class="timeline-marker-icon">
      <span class="size-2 rounded-full bg-primary animate-pulse"></span>
    </span>
  </:marker>
  <:item time="Now">
    <h4>Deploy running</h4>
    <p>Release job is currently publishing assets.</p>
  </:item>
  <:item time="5 min ago">
    <h4>Build started</h4>
    <p>CI picked up the latest commit.</p>
  </:item>
</.timeline>

<.timeline>
  <:item time="12 min ago">
    <div class="flex items-start gap-3">
      <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground">A</span>
      <p><strong>Alex</strong> created a new project</p>
    </div>
  </:item>
  <:item time="1 hour ago">
    <div class="flex items-start gap-3">
      <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary text-xs font-bold text-secondary-foreground">S</span>
      <div>
        <p><strong>Sarah</strong> left a comment</p>
        <div class="mt-2 rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
          Looks good. The empty state copy feels much clearer now.
        </div>
      </div>
    </div>
  </:item>
  <:item time="3 hours ago">
    <div class="flex items-start gap-3">
      <span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-destructive text-xs font-bold text-destructive-foreground">M</span>
      <p><strong>Mike</strong> merged PR #342</p>
    </div>
  </:item>
</.timeline>

<.timeline>
  <:item time="12 min ago">
    <div class="flex items-start gap-3">
      <img
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face"
        alt=""
        class="size-8 rounded-full"
      />
      <div>
        <p class="text-sm">
          <strong>Alex Morgan</strong>
          created
          <a href="#" class="font-medium text-primary hover:underline">Design System</a>
        </p>
        <p class="text-sm text-muted-foreground">Added the initial component checklist.</p>
      </div>
    </div>
  </:item>
  <:item time="1 hour ago">
    <div class="flex items-start gap-3">
      <img
        src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=face"
        alt=""
        class="size-8 rounded-full"
      />
      <div>
        <p class="text-sm">
          <strong>Sarah Lee</strong>
          commented on
          <a href="#" class="font-medium text-primary hover:underline">PR #342</a>
        </p>
        <div class="mt-2 rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
          Looks good. The empty state copy feels much clearer now.
        </div>
      </div>
    </div>
  </:item>
  <:item time="3 hours ago">
    <div class="flex items-start gap-3">
      <img
        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=face"
        alt=""
        class="size-8 rounded-full"
      />
      <div>
        <p class="text-sm">
          <strong>Mike Ross</strong>
          merged <a href="#" class="font-medium text-primary hover:underline">PR #342</a>
        </p>
        <p class="text-sm text-muted-foreground">
          Refactored the auth module and updated tests.
        </p>
      </div>
    </div>
  </:item>
</.timeline>