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 React from "react";
|
||||||
|
import ConfirmActionModal from "../modals/ConfirmActionModal";
|
||||||
|
|
||||||
type DeleteConfirmationModalProps = {
|
type DeleteConfirmationModalProps = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@ -23,44 +24,18 @@ export default function DeleteConfirmationModal({
|
|||||||
onCancel,
|
onCancel,
|
||||||
children,
|
children,
|
||||||
}: DeleteConfirmationModalProps) {
|
}: DeleteConfirmationModalProps) {
|
||||||
if (!open) return null;
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50">
|
<ConfirmActionModal
|
||||||
<div className="absolute inset-0 bg-black/40" onClick={onCancel} />
|
open={open}
|
||||||
<div className="absolute inset-0 flex items-center justify-center p-4">
|
pending={loading}
|
||||||
<div className="w-full max-w-md rounded-2xl bg-white shadow-2xl ring-1 ring-black/10">
|
intent="danger"
|
||||||
<div className="p-6">
|
title={title}
|
||||||
<div className="flex items-center gap-3 mb-3">
|
description={description}
|
||||||
<div className="flex items-center justify-center h-10 w-10 rounded-full bg-red-100">
|
confirmText={confirmText}
|
||||||
<svg width="24" height="24" fill="none" stroke="currentColor" className="text-red-600">
|
cancelText={cancelText}
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
onConfirm={onConfirm}
|
||||||
</svg>
|
onClose={onCancel}
|
||||||
</div>
|
extraContent={children}
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
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