Alert dialog with icon

<!--
  Оригинал использует IconPlaceholder внутри AlertDialogMedia — не
  монтируется в закрытом состоянии (см. docs/PORTING.md, block-dialog),
  диф её не проверяет. Заменено инлайновым <svg> (путь lucide-react
  v0.545.0: "bluetooth") для полноты порта.
-->
<script setup lang="ts">
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
</script>

<template>
  <AlertDialog>
    <AlertDialogTrigger as-child>
      <Button variant="outline">Default (Media)</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogMedia>
          <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"
          ><path d="m7 7 10 10-5 5V2l5 5L7 17" /></svg>
        </AlertDialogMedia>
        <AlertDialogTitle>Pair with this device?</AlertDialogTitle>
        <AlertDialogDescription>
          This will allow the device to connect and share data with your current session.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Connect</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>