legalgo-FE-reactrouter/app/components/dialog/delete.tsx

import {
  Description,
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react'
import { useEffect, type PropsWithChildren } from 'react'
import toast from 'react-hot-toast'
import { useFetcher } from 'react-router'

import { Button } from '~/components/ui/button'

type TProperties = PropsWithChildren & {
  selectedId?: string
  close: () => void
  title: string
  fetcherAction: string
}

export const DialogDelete = (properties: TProperties) => {
  const { selectedId, close, children, title, fetcherAction } = properties || {}
  const fetcher = useFetcher()

  useEffect(() => {
    if (fetcher.data?.success === false) {
      toast.error(fetcher.data?.message)
      return
    }

    if (fetcher.data?.success === true) {
      close()
      toast.success(`${title} berhasil dihapus!`)
      return
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fetcher.data])

  return (
    <Dialog
      open={!!selectedId}
      onClose={() => {
        if (fetcher.state === 'idle') {
          close()
        }
      }}
      className="relative z-50"
      transition
    >
      <DialogBackdrop
        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
        transition
      />
      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
        <DialogPanel
          transition
          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
        >
          <DialogTitle className="relative text-xl font-bold">
            <span>Anda akan menghapus</span>{' '}
            <span className="lowercase">{title}</span> <span>berikut?</span>
          </DialogTitle>
          <Description className="space-y-1 text-center text-[#565658]">
            {children}
          </Description>
          <div className="flex justify-end">
            <fetcher.Form
              method="POST"
              action={fetcherAction}
              className="grid"
            >
              <Button
                type="submit"
                variant="danger"
                className="text-md h-[42px] rounded-md"
                disabled={fetcher.state !== 'idle'}
                isLoading={fetcher.state !== 'idle'}
              >
                Hapus
              </Button>
            </fetcher.Form>
          </div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}