52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import { XMarkIcon } from '@heroicons/react/20/solid'
|
|
import { FeedbackForm } from '@/components/FeedbackForm'
|
|
|
|
export function FeedbackModal({
|
|
open,
|
|
onClose,
|
|
}: {
|
|
open: boolean
|
|
onClose: () => void
|
|
}) {
|
|
useEffect(() => {
|
|
if (!open) return
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('keydown', onKey)
|
|
return () => document.removeEventListener('keydown', onKey)
|
|
}, [open, onClose])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div
|
|
className="absolute inset-0 bg-black/70 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
/>
|
|
<div className="relative z-10 w-full max-w-lg rounded-2xl border border-zinc-800 bg-zinc-950 p-7 shadow-2xl">
|
|
<div className="mb-5 flex items-center justify-between">
|
|
<h2 className="text-base font-bold text-white">Send Feedback</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-zinc-500 hover:text-zinc-300"
|
|
aria-label="Close"
|
|
>
|
|
<XMarkIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
<FeedbackForm onSuccess={onClose} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|