Dialog 1

• Vista previa

  Abrir dialog

• Dependencias

  Terminal

  npm install @headlessui/react

• Código

  'use client';
  
  import { Fragment, useState } from 'react';
  import { Dialog, Transition } from '@headlessui/react';
  
  const Dialog1 = () => {
    const [isOpen, setIsOpen] = useState<boolean>(false);
  
    return (
      <>
        <div className="flex items-center justify-center">
          <button
            type="button"
            onClick={() => setIsOpen(true)}
            className="rounded-md bg-background-secondary px-4 py-2 font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
          >
            Abrir dialog
          </button>
        </div>
  
        <Transition appear show={isOpen} as={Fragment}>
          <Dialog as="div" className="relative z-10" onClose={() => setIsOpen(false)}>
            <Transition.Child
              as={Fragment}
              enter="ease-out"
              enterFrom="opacity-0"
              enterTo="opacity-100"
              leave="ease-in"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >
              <div className="fixed inset-0 bg-background/30 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 text-center">
                <Transition.Child
                  as={Fragment}
                  enter="transition ease-out"
                  enterFrom="transform scale-95 opacity-0"
                  enterTo="transform scale-100 opacity-100"
                  leave="transition ease-out"
                  leaveFrom="transform scale-100 opacity-100"
                  leaveTo="transform scale-95 opacity-0"
                >
                  <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-background-secondary p-6 text-left align-middle shadow-xl transition-all">
                    <Dialog.Title as="h3" className="text-lg font-medium leading-6">
                      Payment successful
                    </Dialog.Title>
                    <div className="mt-2">
                      <p className="text-sm text-muted-foreground">
                        Your payment has been successfully submitted. We’ve sent you an email with all of the details of
                        your order.
                      </p>
                    </div>
  
                    <div className="mt-4">
                      <button
                        type="button"
                        className="py-2 px-3 rounded-md bg-background"
                        onClick={() => setIsOpen(false)}
                      >
                        Success
                      </button>
                    </div>
                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>
      </>
    );
  };
  
  export default Dialog1;