124 lines
5.9 KiB
TypeScript
124 lines
5.9 KiB
TypeScript
import { Fragment } from 'react';
|
|
import { Dialog, Transition } from '@headlessui/react';
|
|
import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
variant?: 'danger' | 'warning' | 'info';
|
|
}
|
|
|
|
export default function ConfirmDialog({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = 'Confirmar',
|
|
cancelText = 'Cancelar',
|
|
variant = 'danger'
|
|
}: ConfirmDialogProps) {
|
|
const handleConfirm = () => {
|
|
onConfirm();
|
|
onClose();
|
|
};
|
|
|
|
const variantStyles = {
|
|
danger: {
|
|
icon: 'bg-red-100 dark:bg-red-900/20',
|
|
iconColor: 'text-red-600 dark:text-red-400',
|
|
button: 'bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800'
|
|
},
|
|
warning: {
|
|
icon: 'bg-yellow-100 dark:bg-yellow-900/20',
|
|
iconColor: 'text-yellow-600 dark:text-yellow-400',
|
|
button: 'bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-800'
|
|
},
|
|
info: {
|
|
icon: 'bg-blue-100 dark:bg-blue-900/20',
|
|
iconColor: 'text-blue-600 dark:text-blue-400',
|
|
button: 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800'
|
|
}
|
|
};
|
|
|
|
const style = variantStyles[variant];
|
|
|
|
return (
|
|
<Transition.Root show={isOpen} as={Fragment}>
|
|
<Dialog as="div" className="relative z-50" onClose={onClose}>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 bg-zinc-900/40 backdrop-blur-sm transition-opacity" />
|
|
</Transition.Child>
|
|
|
|
<div className="fixed inset-0 z-10 overflow-y-auto">
|
|
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
>
|
|
<Dialog.Panel className="relative transform overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg border border-zinc-200 dark:border-zinc-800">
|
|
<div className="p-6">
|
|
<div className="flex items-start gap-4">
|
|
<div className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl ${style.icon}`}>
|
|
<ExclamationTriangleIcon className={`h-6 w-6 ${style.iconColor}`} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<Dialog.Title className="text-lg font-semibold text-zinc-900 dark:text-white">
|
|
{title}
|
|
</Dialog.Title>
|
|
<p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
|
{message}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-lg p-1.5 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
<XMarkIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 flex gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2.5 border border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 font-medium rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors"
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleConfirm}
|
|
className={`flex-1 px-4 py-2.5 text-white font-medium rounded-lg transition-colors ${style.button}`}
|
|
>
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition.Root>
|
|
);
|
|
}
|