108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useEffect, useRef } from "react"
|
||
|
|
import { AlertTriangle, X } from "lucide-react"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
interface ConfirmModalProps {
|
||
|
|
open: boolean
|
||
|
|
title?: string
|
||
|
|
description?: string
|
||
|
|
confirmLabel?: string
|
||
|
|
cancelLabel?: string
|
||
|
|
variant?: "danger" | "warning"
|
||
|
|
loading?: boolean
|
||
|
|
onConfirm: () => void
|
||
|
|
onCancel: () => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ConfirmModal({
|
||
|
|
open,
|
||
|
|
title = "Are you sure?",
|
||
|
|
description = "This action cannot be undone.",
|
||
|
|
confirmLabel = "Delete",
|
||
|
|
cancelLabel = "Cancel",
|
||
|
|
variant = "danger",
|
||
|
|
loading = false,
|
||
|
|
onConfirm,
|
||
|
|
onCancel,
|
||
|
|
}: ConfirmModalProps) {
|
||
|
|
const confirmRef = useRef<HTMLButtonElement>(null)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (open) setTimeout(() => confirmRef.current?.focus(), 50)
|
||
|
|
}, [open])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
function onKey(e: KeyboardEvent) {
|
||
|
|
if (e.key === "Escape" && open) onCancel()
|
||
|
|
}
|
||
|
|
document.addEventListener("keydown", onKey)
|
||
|
|
return () => document.removeEventListener("keydown", onKey)
|
||
|
|
}, [open, onCancel])
|
||
|
|
|
||
|
|
if (!open) return null
|
||
|
|
|
||
|
|
const isDanger = variant === "danger"
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-[300] flex items-center justify-center px-4">
|
||
|
|
{/* Backdrop */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
||
|
|
onClick={onCancel}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Modal */}
|
||
|
|
<div className="relative w-full max-w-sm overflow-hidden rounded-2xl border border-white/[0.08] bg-[#16161f] shadow-2xl shadow-black/80 animate-in fade-in zoom-in-95 duration-150">
|
||
|
|
{/* Close */}
|
||
|
|
<button
|
||
|
|
onClick={onCancel}
|
||
|
|
className="absolute right-4 top-4 rounded-lg p-1 text-white/30 transition hover:text-white"
|
||
|
|
>
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div className="p-6">
|
||
|
|
{/* Icon */}
|
||
|
|
<div className={cn(
|
||
|
|
"mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl border",
|
||
|
|
isDanger
|
||
|
|
? "border-red-500/20 bg-red-500/10 text-red-400"
|
||
|
|
: "border-amber-500/20 bg-amber-500/10 text-amber-400"
|
||
|
|
)}>
|
||
|
|
<AlertTriangle className="h-6 w-6" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 className="text-center text-base font-bold text-white">{title}</h2>
|
||
|
|
<p className="mt-2 text-center text-sm text-white/50">{description}</p>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="mt-6 flex gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onCancel}
|
||
|
|
disabled={loading}
|
||
|
|
className="flex-1 rounded-xl border border-white/10 py-2.5 text-sm font-medium text-white/50 transition hover:border-white/20 hover:text-white disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{cancelLabel}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
ref={confirmRef}
|
||
|
|
onClick={onConfirm}
|
||
|
|
disabled={loading}
|
||
|
|
className={cn(
|
||
|
|
"flex-1 rounded-xl py-2.5 text-sm font-semibold text-white transition disabled:opacity-50",
|
||
|
|
isDanger
|
||
|
|
? "bg-red-600 hover:bg-red-500 hover:shadow-lg hover:shadow-red-500/20"
|
||
|
|
: "bg-amber-600 hover:bg-amber-500 hover:shadow-lg hover:shadow-amber-500/20"
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{loading ? "Deleting…" : confirmLabel}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|