Relative time popover with timezone details

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue"
import { Badge } from "@/components/reui/badge"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { format, formatDistanceToNow } from "date-fns"

const now = ref(new Date())
let timer: ReturnType<typeof setInterval> | undefined

onMounted(() => {
  timer = setInterval(() => {
    now.value = new Date()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer)
})

// Static reference time for the "last deployed" example
const referenceTime = computed(() => new Date(now.value.getTime() - 1000 * 60 * 120)) // 2 hours ago
</script>

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <p class="text-muted-foreground text-sm">
      Last deployed
      <Popover>
        <PopoverTrigger as-child>
          <button class="text-foreground cursor-default underline decoration-dashed decoration-1 underline-offset-4 outline-hidden">
            {{ formatDistanceToNow(referenceTime, { addSuffix: true }) }}
          </button>
        </PopoverTrigger>
        <PopoverContent class="w-auto max-w-86 gap-0 p-0" align="start">
          <p class="text-foreground border-b px-2 py-1 font-medium">
            {{ formatDistanceToNow(referenceTime, { addSuffix: true }) }}
          </p>
          <div class="px-2 py-1.5">
            <table>
              <tbody>
                <tr>
                  <td class="pr-4 pb-1.5">
                    <Badge variant="outline">UTC</Badge>
                  </td>
                  <td class="pr-6 pb-1.5">{{ format(referenceTime, "MMM d, yyyy") }}</td>
                  <td class="text-muted-foreground pb-1.5">{{ format(referenceTime, "hh:mm:ss a") }}</td>
                </tr>
                <tr>
                  <td class="pr-4">
                    <span class="bg-muted rounded px-1.5 py-0.5 font-medium">{{
                      Intl.DateTimeFormat().resolvedOptions().timeZone.split("/").pop()?.replace("_", " ") || "Local"
                    }}</span>
                  </td>
                  <td class="pr-6">{{ format(now, "MMM d, yyyy") }}</td>
                  <td class="text-muted-foreground w-28">{{ format(now, "hh:mm:ss a") }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </PopoverContent>
      </Popover>
      by CI/CD pipeline.
    </p>
  </div>
</template>