Contenido para Eliminar un Meeti

1.- meeti.store.ts

import { create } from 'zustand'
import { SelectMeeti } from '../types/meeti.types'

type Store = {
  meeti: SelectMeeti | null
  setMeeti: (meeti: SelectMeeti | null) => void
  open: boolean
  setOpen: (open: boolean) => void
}

export const useMeetiStore = create<Store>((set) => ({
  meeti: null,
  setMeeti: (meeti) => {
    set({meeti})
  },
  open: false,
  setOpen: (open) => {
    set({open})
  }
}))

2.- DeleteMeetiDialog.tsx

'use client'

import { useState } from 'react'
import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'

export default function DeleteMeetiDialog() {
    const [open, setOpen] = useState(true)

    return (
        <div>
            <Dialog open={open} onClose={setOpen} className="relative z-100">
                <DialogBackdrop
                    transition
                    className="fixed inset-0 bg-gray-800/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in dark:bg-gray-900/50"
                />

                <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
                    <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                        <DialogPanel
                            transition
                            className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95 dark:bg-gray-800 dark:outline dark:-outline-offset-1 dark:outline-white/10"
                        >
                            <div className="sm:flex sm:items-start">
                                <div className="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10 dark:bg-red-500/10">
                                    <ExclamationTriangleIcon aria-hidden="true" className="size-6 text-red-600 dark:text-red-400" />
                                </div>
                                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                    <DialogTitle as="h3" className="text-base font-semibold text-gray-900 dark:text-white">
                                        Eliminar Meeti:
                                    </DialogTitle>
                                    <div className="mt-2">
                                        <p className="text-gray-600">
                                            ¿Confirmas que deseas eliminar este Meeti? Un Meeti Eliminado no se puede recuperar
                                        </p>

                                        <div className='mt-5'>
                                            <input
                                                type="submit"
                                                value='Eliminar Meeti'
                                                data-autofocus
                                                onClick={() => {}}
                                                className="inline-flex w-full justify-center  bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:w-auto dark:bg-red-500 dark:hover:bg-red-400"
                                            />

                                            <button
                                                type="button"
                                                onClick={() => setOpen(false)}
                                                className="mt-3 inline-flex w-full justify-center  bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto dark:bg-white/10 dark:text-white dark:inset-ring-white/5 dark:hover:bg-white/20"
                                            >
                                                Cancelar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </DialogPanel>
                    </div>
                </div>
            </Dialog>
        </div>
    )
}