"use client"; import { useEffect, useRef, useState } from "react"; import { TriangleAlert, X } from "lucide-react"; export default function FeedbackModalDialog() { const [open, setOpen] = useState(false); const [confirm, setConfirm] = useState(""); const [deleted, setDeleted] = useState(false); const trigger = useRef(null); const inputRef = useRef(null); const dialog = useRef(null); useEffect(() => { if (!open) return; inputRef.current?.focus(); const t = trigger.current; function onKey(e: KeyboardEvent) { if (e.key === "Escape") setOpen(false); if (e.key === "Tab" && dialog.current) { const els = dialog.current.querySelectorAll("button:not([disabled]), input"); const first = els[0]; const last = els[els.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } } document.addEventListener("keydown", onKey); return () => { document.removeEventListener("keydown", onKey); t?.focus(); }; }, [open]); const close = () => { setOpen(false); setConfirm(""); }; return (

{deleted ? "Repository “marketing-site” was deleted." : "Danger zone"}

{open && (

)}

); }

Confirmation modal dialog