133 lines
4.5 KiB
TypeScript
133 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { Fragment } from 'react'
|
|
import { Dialog, Transition } from '@headlessui/react'
|
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
|
|
|
|
type ConfirmIntent = 'default' | 'danger'
|
|
|
|
interface ConfirmActionModalProps {
|
|
open: boolean
|
|
title: string
|
|
description: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
pending?: boolean
|
|
intent?: ConfirmIntent
|
|
onClose: () => void
|
|
onConfirm: () => Promise<void> | void
|
|
extraContent?: React.ReactNode
|
|
}
|
|
|
|
export default function ConfirmActionModal({
|
|
open,
|
|
title,
|
|
description,
|
|
confirmText = 'Confirm',
|
|
cancelText = 'Cancel',
|
|
pending = false,
|
|
intent = 'default',
|
|
onClose,
|
|
onConfirm,
|
|
extraContent,
|
|
}: ConfirmActionModalProps) {
|
|
const [displayData, setDisplayData] = React.useState({
|
|
title,
|
|
description,
|
|
confirmText,
|
|
cancelText,
|
|
intent,
|
|
extraContent: extraContent ?? null,
|
|
})
|
|
|
|
React.useEffect(() => {
|
|
if (!open) return
|
|
setDisplayData({
|
|
title,
|
|
description,
|
|
confirmText,
|
|
cancelText,
|
|
intent,
|
|
extraContent: extraContent ?? null,
|
|
})
|
|
}, [open, title, description, confirmText, cancelText, intent, extraContent])
|
|
|
|
const activeIntent = displayData.intent
|
|
|
|
const confirmButtonClass =
|
|
activeIntent === 'danger'
|
|
? 'inline-flex items-center rounded-md border border-red-300 bg-red-600 px-3 py-2 text-sm text-white hover:bg-red-700 disabled:opacity-60'
|
|
: 'inline-flex items-center rounded-md border border-[#8D6B1D] bg-[#8D6B1D] px-3 py-2 text-sm text-white hover:bg-[#7A5E1A] disabled:opacity-60'
|
|
|
|
const iconColorClass = activeIntent === 'danger' ? 'text-red-600' : 'text-amber-600'
|
|
|
|
return (
|
|
<Transition show={open} as={Fragment}>
|
|
<Dialog onClose={pending ? () => {} : onClose} className="relative z-[1100]">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="transition-opacity ease-out duration-200"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="transition-opacity ease-in duration-150"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm" />
|
|
</Transition.Child>
|
|
|
|
<div className="fixed inset-0 overflow-y-auto">
|
|
<div className="flex min-h-full items-center justify-center p-4">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="transition-all ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-2 sm:scale-95"
|
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
leave="transition-all ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
leaveTo="opacity-0 translate-y-2 sm:scale-95"
|
|
>
|
|
<Dialog.Panel className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl ring-1 ring-black/10">
|
|
<div className="flex items-start gap-3">
|
|
<div className="shrink-0">
|
|
<ExclamationTriangleIcon className={`h-6 w-6 ${iconColorClass}`} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<Dialog.Title className="text-lg font-semibold text-gray-900">
|
|
{displayData.title}
|
|
</Dialog.Title>
|
|
<div className="mt-2 text-sm text-gray-600">
|
|
<p>{displayData.description}</p>
|
|
{displayData.extraContent ? <div className="mt-3">{displayData.extraContent}</div> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={onClose}
|
|
className="inline-flex items-center rounded-md border border-gray-300 px-3 py-2 text-sm text-gray-800 hover:bg-gray-50 disabled:opacity-60"
|
|
>
|
|
{displayData.cancelText}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={onConfirm}
|
|
className={confirmButtonClass}
|
|
>
|
|
{displayData.confirmText}
|
|
</button>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
)
|
|
}
|