feat: implement ConfirmActionModal for enhanced delete confirmation
This commit is contained in:
seaznCode
parent
b164f73b43
commit
ab003be9fa
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import ConfirmActionModal from "../modals/ConfirmActionModal";
|
||||
|
||||
type DeleteConfirmationModalProps = {
|
||||
open: boolean;
|
||||
@ -23,44 +24,18 @@ export default function DeleteConfirmationModal({
|
||||
onCancel,
|
||||
children,
|
||||
}: DeleteConfirmationModalProps) {
|
||||
if (!open) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
<div className="absolute inset-0 bg-black/40" onClick={onCancel} />
|
||||
<div className="absolute inset-0 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="flex items-center justify-center h-10 w-10 rounded-full bg-red-100">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" className="text-red-600">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{title}</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700 mb-4">{description}</p>
|
||||
{children}
|
||||
<div className="flex items-center justify-end gap-2 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="text-sm px-4 py-2 rounded-lg bg-white hover:bg-gray-50 text-gray-800 border border-gray-200"
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
className="text-sm px-4 py-2 rounded-lg bg-red-600 hover:bg-red-500 text-white disabled:opacity-60"
|
||||
>
|
||||
{loading ? "Deleting…" : confirmText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmActionModal
|
||||
open={open}
|
||||
pending={loading}
|
||||
intent="danger"
|
||||
title={title}
|
||||
description={description}
|
||||
confirmText={confirmText}
|
||||
cancelText={cancelText}
|
||||
onConfirm={onConfirm}
|
||||
onClose={onCancel}
|
||||
extraContent={children}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
132
src/app/components/modals/ConfirmActionModal.tsx
Normal file
132
src/app/components/modals/ConfirmActionModal.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user