52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import { useRef } from "preact/hooks";
|
|
import { useFocusTrap } from "../utils/useFocusTrap.ts";
|
|
|
|
interface YesNoPopupProps {
|
|
question: string;
|
|
onAnswer: (answer: boolean) => void;
|
|
}
|
|
|
|
export default function YesNoPopup({ question, onAnswer }: YesNoPopupProps) {
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Enable focus trap for keyboard navigation
|
|
useFocusTrap(true, modalRef);
|
|
|
|
const handleAnswer = (answer: boolean) => {
|
|
onAnswer(answer);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={modalRef}
|
|
className="theme-popup-overlay"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="popup-question"
|
|
>
|
|
<div
|
|
className="theme-popup-container"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<p id="popup-question">{question}</p>
|
|
<div className="flex gap-16 mt-4 justify-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleAnswer(true)}
|
|
className="theme-popup-button"
|
|
>
|
|
Yes
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleAnswer(false)}
|
|
className="theme-popup-button"
|
|
>
|
|
No
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|