1import { useState } from 'react';
 2import * as DialogPrimitive from '@radix-ui/react-dialog';
 3
 4export default function App() {
 5  const [open, setOpen] = useState(false);
 6
 7  return (
 8    <main className="page">
 9      <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
10        <DialogPrimitive.Trigger asChild>
11          <button data-testid="open-dialog" type="button">Open Dialog</button>
12        </DialogPrimitive.Trigger>
13        <DialogPrimitive.Portal>
14          <DialogPrimitive.Overlay className="dialog-overlay" />
15          <DialogPrimitive.Content className="dialog-content">
16            <aside className="lightbox">
17              <DialogPrimitive.Title asChild>
18                <h1 className="hero-title">Modal Heading</h1>
19              </DialogPrimitive.Title>
20              <p className="hero-hook">Inside a Radix DialogPrimitive.Portal.</p>
21              <button data-testid="close-dialog" type="button" onClick={() => setOpen(false)}>
22                Close
23              </button>
24            </aside>
25          </DialogPrimitive.Content>
26        </DialogPrimitive.Portal>
27      </DialogPrimitive.Root>
28    </main>
29  );
30}