Confirmation for successful e-ticket registration

<!-- Иконка внутри AlertDialogMedia не монтируется в закрытом состоянии; путь lucide "check". -->
<script setup lang="ts">
import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

const ROWS: [string, string][] = [
  ["Order Number", "GBD99763JS"],
  ["Order Date", "7 September 2024"],
  ["Event Name", "Groove Beats Day Fest"],
  ["Event Date", "20/09/2024"],
  ["Register Date", "20/09/2024 | 09 PM"],
]
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">View Confirmation</Button>
    </AlertDialogTrigger>
    <AlertDialogContent class="gap-8 p-8 sm:max-w-sm">
      <div class="mx-auto flex flex-col items-center justify-center gap-2">
        <AlertDialogMedia class="bg-info/10 text-info dark:bg-info/20 size-16 rounded-full">
          <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"
            class="size-5"
          ><path d="M20 6 9 17l-5-5" /></svg>
        </AlertDialogMedia>
        <AlertDialogTitle class="text-center">Success! Your e-ticket is registered.</AlertDialogTitle>
        <AlertDialogDescription class="max-w-xs text-center">
          Please check your email for confirmation and further instructions about the event.
        </AlertDialogDescription>
      </div>

      <div class="bg-muted/60 grid gap-4 rounded-xl p-4">
        <div v-for="[label, value] in ROWS" :key="label" class="flex items-center justify-between text-sm">
          <span class="text-muted-foreground font-medium">{{ label }}</span>
          <span class="text-foreground font-semibold">{{ value }}</span>
        </div>
      </div>

      <AlertDialogFooter class="-mx-8 -mb-8 px-8">
        <AlertDialogCancel size="lg" variant="default" class="w-full sm:w-full">Back to Home</AlertDialogCancel>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>