99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { Fragment } from 'react'
|
|
import { Dialog, Transition } from '@headlessui/react'
|
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
|
|
|
|
interface DeactivateReferralLinkModalProps {
|
|
open: boolean
|
|
pending?: boolean
|
|
linkPreview?: string
|
|
fullUrl?: string
|
|
onClose: () => void
|
|
onConfirm: () => Promise<void> | void
|
|
}
|
|
|
|
export default function DeactivateReferralLinkModal({
|
|
open,
|
|
pending = false,
|
|
linkPreview,
|
|
fullUrl,
|
|
onClose,
|
|
onConfirm,
|
|
}: DeactivateReferralLinkModalProps) {
|
|
return (
|
|
<Transition show={open} as={Fragment}>
|
|
<Dialog onClose={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 text-red-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<Dialog.Title className="text-lg font-semibold text-gray-900">
|
|
Deactivate referral link?
|
|
</Dialog.Title>
|
|
<div className="mt-2 text-sm text-gray-600">
|
|
<p>This will immediately deactivate the selected referral link so it can no longer be used.</p>
|
|
{linkPreview && (
|
|
<div className="mt-3">
|
|
<span className="text-xs uppercase text-gray-500">Link</span>
|
|
<div title={fullUrl} className="mt-1 inline-flex items-center rounded bg-gray-100 px-2 py-1 text-xs font-mono text-gray-800">
|
|
{linkPreview}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</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"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={pending}
|
|
onClick={onConfirm}
|
|
className="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"
|
|
>
|
|
{pending ? 'Deactivating…' : 'Deactivate'}
|
|
</button>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
)
|
|
}
|