Dialog 3

• Vista previa

  Ver perfil de usuario

• Dependencias

  Terminal

  npm install @headlessui/react

• Código

  'use client';
  
  import { Fragment, useState } from 'react';
  import { Dialog, Transition } from '@headlessui/react';
  import Image from 'next/image';
  
  const Dialog3 = () => {
    const [isOpen, setIsOpen] = useState<boolean>(false);
  
    return (
      <>
        <div className="flex items-center justify-center">
          <button
            type="button"
            onClick={() => setIsOpen(true)}
            className="flex items-center gap-x-2 rounded-md bg-secondary px-4 py-2 font-medium"
          >
            Ver perfil de usuario
          </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-md bg-background-secondary text-left align-middle shadow-xl transition-all">
                    <div className="w-full h-20 bg-tertiary" />
                    <div className="p-5 -translate-y-8">
                      <div className="flex items-center">
                        <section className="basis-1/3">
                          <div className="relative w-20 h-20">
                            <Image
                              src="https://img.freepik.com/foto-gratis/hermosa-nina-sonriendo-sinceramente-pared-aislada-modelo-corona-flores-posando-retrato-perfil_197531-14305.jpg?t=st=1713773808~exp=1713777408~hmac=475611ce8307ac253ca0e789c14375d1e8e9a6aa541c4c960322a9859e38c0cf&w=1380"
                              alt="Image"
                              fill
                              className="object-cover rounded-full ring-4 ring-secondary"
                            />
                          </div>
                        </section>
                        <section className="basis-2/3">
                          <div className="flex justify-end">
                            <button
                              type="button"
                              className="border border-muted-foreground py-2 px-3 rounded-md flex items-center gap-2 text-sm outline-none"
                              onClick={() => setIsOpen(false)}
                            >
                              <i className="fi fi-rr-link-slash-alt"></i>
                              Copiar link
                            </button>
                          </div>
                        </section>
                      </div>
                      <div className="mt-5">
                        <h3 className="text-xl font-bold">Amélle Laurent</h3>
                        <p className="text-sm text-muted-foreground">amelle@elementum-ui.com</p>
                      </div>
                      <form className="mt-5">
                        <div className="flex items-center mb-5">
                          <div className="basis-1/2">
                            <label>Nombre</label>
                          </div>
                          <div className="basis-1/2">
                            <input
                              className="w-full bg-transparent border border-muted-foreground outline-none rounded-md py-2 px-4 placeholder:text-muted-foreground"
                              placeholder="Amélle Laurent"
                            />
                          </div>
                        </div>
                        <div className="flex items-center mb-5">
                          <div className="basis-1/2">
                            <label>Correo electrónico</label>
                          </div>
                          <div className="basis-1/2">
                            <input
                              className="w-full bg-transparent border border-muted-foreground outline-none rounded-md py-2 px-4 placeholder:text-muted-foreground"
                              placeholder="amelle@elementum-ui.com"
                            />
                          </div>
                        </div>
                        <div className="mt-5">
                          <button
                            type="button"
                            className="border border-muted-foreground py-2 px-3 rounded-md outline-none"
                            onClick={() => setIsOpen(false)}
                          >
                            Cambiar foto de perfil
                          </button>
                        </div>
                        <div className="mt-10 flex items-center flex-nowrap">
                          <section className="basis-1/3">
                            <button
                              type="button"
                              className="py-2 px-3 rounded-md border border-danger flex items-center gap-x-3 text-danger text-sm box-border outline-none"
                              onClick={() => setIsOpen(false)}
                            >
                              <i className="fi fi-rr-trash"></i>
                              Eliminar
                            </button>
                          </section>
                          <section className="flex items-center justify-end gap-x-2 basis-2/3">
                            <button
                              type="button"
                              className="py-2 px-3 rounded-md border border-muted-foreground text-sm box-border outline-none"
                              onClick={() => setIsOpen(false)}
                            >
                              Cancelar
                            </button>
                            <button
                              type="button"
                              className="box-border py-2 px-3 rounded-md border-2 border-tertiary bg-tertiary text-sm outline-none"
                              onClick={() => setIsOpen(false)}
                            >
                              Guardar
                            </button>
                          </section>
                        </div>
                      </form>
                    </div>
                  </Dialog.Panel>
                </Transition.Child>
              </div>
            </div>
          </Dialog>
        </Transition>
      </>
    );
  };
  
  export default Dialog3;