77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react'
|
|
|
|
export default function ConfirmDangerModal({ open, onClose, onConfirm, title, message, confirmText = 'DELETE' }) {
|
|
const [input, setInput] = useState('')
|
|
const inputRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setInput('')
|
|
setTimeout(() => inputRef.current?.focus(), 100)
|
|
}
|
|
}, [open])
|
|
|
|
if (!open) return null
|
|
|
|
const canConfirm = input === confirmText
|
|
|
|
const handleKeyDown = (e) => {
|
|
if (e.key === 'Escape') onClose()
|
|
if (e.key === 'Enter' && canConfirm) onConfirm()
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onKeyDown={handleKeyDown}>
|
|
{/* Backdrop */}
|
|
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
|
|
|
|
{/* Modal */}
|
|
<div className="relative w-full max-w-md bg-nova-900 border border-red-500/30 rounded-2xl shadow-2xl shadow-red-500/10 p-6 space-y-4">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
|
|
<i className="fa-solid fa-triangle-exclamation text-red-400" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">{title}</h3>
|
|
<p className="text-sm text-slate-400 mt-1">{message}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium text-slate-400 mb-1.5 block">
|
|
Type <span className="text-red-400 font-mono">{confirmText}</span> to confirm
|
|
</label>
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
className="w-full px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-red-500/50 font-mono"
|
|
placeholder={confirmText}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-2 pt-2">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
disabled={!canConfirm}
|
|
className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
|
|
canConfirm
|
|
? 'bg-red-600 hover:bg-red-700 text-white'
|
|
: 'bg-white/5 text-slate-500 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
Delete permanently
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|