95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
import React, { useEffect, useRef } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
|
|
export default function NovaConfirmDialog({
|
|
open,
|
|
title = 'Please confirm',
|
|
message,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
confirmTone = 'danger',
|
|
onConfirm,
|
|
onClose,
|
|
busy = false,
|
|
}) {
|
|
const backdropRef = useRef(null)
|
|
const cancelButtonRef = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if (!open) return undefined
|
|
const timeoutId = window.setTimeout(() => cancelButtonRef.current?.focus(), 60)
|
|
return () => window.clearTimeout(timeoutId)
|
|
}, [open])
|
|
|
|
useEffect(() => {
|
|
if (!open) return undefined
|
|
|
|
const handleKeyDown = (event) => {
|
|
if (event.key === 'Escape' && !busy) {
|
|
onClose?.()
|
|
}
|
|
}
|
|
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
}, [busy, onClose, open])
|
|
|
|
if (!open) return null
|
|
|
|
const confirmClassName = confirmTone === 'danger'
|
|
? 'border border-rose-400/25 bg-rose-500/12 text-rose-100 hover:bg-rose-500/18 focus-visible:ring-rose-300/50'
|
|
: 'border border-accent/25 bg-accent/90 text-deep hover:brightness-110 focus-visible:ring-accent/50'
|
|
|
|
return createPortal(
|
|
<div
|
|
ref={backdropRef}
|
|
className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
|
|
onClick={(event) => {
|
|
if (event.target === backdropRef.current && !busy) {
|
|
onClose?.()
|
|
}
|
|
}}
|
|
role="presentation"
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="nova-confirm-title"
|
|
className="w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]"
|
|
>
|
|
<div className="border-b border-white/[0.06] bg-white/[0.02] px-6 py-5">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Skinbase Nova</p>
|
|
<h3 id="nova-confirm-title" className="mt-2 text-lg font-semibold text-white">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="px-6 py-5">
|
|
<p className="text-sm leading-6 text-white/70">{message}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
|
|
<button
|
|
ref={cancelButtonRef}
|
|
type="button"
|
|
onClick={() => onClose?.()}
|
|
disabled={busy}
|
|
className="inline-flex items-center justify-center rounded-full border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-sm font-medium text-white/70 transition hover:bg-white/[0.08] hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{cancelLabel}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onConfirm?.()}
|
|
disabled={busy}
|
|
className={`inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${confirmClassName}`}
|
|
>
|
|
{busy ? 'Working…' : confirmLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
)
|
|
}
|