rtgk-screen-web/pages/components/Modal/index.js

/* This example requires Tailwind CSS v2.0+ */
import react from "react";
import { Fragment, useRef, useState } from "react";
import { Dialog, Transition } from "@headlessui/react";
import { PuzzleIcon } from "@heroicons/react/outline";
import { XIcon } from "@heroicons/react/solid";

export default function Modal({ title, img, closePopHandler, children }) {
  const [open, setOpen] = useState(true);
  const [imgUrl, setImgUrl] = react.useState(img);

  const cancelButtonRef = useRef(null);

  return (
    <Transition.Root show={open} as={Fragment}>
      <Dialog
        as="div"
        className="fixed z-30 inset-0 overflow-y-auto"
        initialFocus={cancelButtonRef}
        onClose={setOpen}
      >
        <div className="flex items-end justify-center min-h-screen  px-4 pb-20 text-center sm:block sm:p-0">
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
          </Transition.Child>

          {/* This element is to trick the browser into centering the modal contents. */}
          <span
            className="hidden sm:inline-block sm:align-middle sm:h-screen"
            aria-hidden="true"
          >
            &#8203;
          </span>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            enterTo="opacity-100 translate-y-0 sm:scale-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          >
            <div className="relative inline-block align-bottom bg-white rounded text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
              <div className="bg-white ">
                <div className="sm:flex sm:items-start">
                  {/* <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 sm:mx-0 sm:h-10 sm:w-10">
                  {!imgUrl ? <PuzzleIcon
                      className="h-6 w-6 text-black-600"
                      aria-hidden="true"
                    />
                  :   <img
                  src={`${imgUrl}`}
                  alt={title}
                  className="mr-3 w-10 h-10 rounded-full bg-slate-50 dark:bg-slate-800 "
                  aria-hidden="true"
                />
                  }
                  </div> */}
                  <div className="w-full   text-center sm:mt-0 sm:text-left ">
                    <Dialog.Title
                      as="h4"
                      className=" text-base leading-6 px-3  pt-2 font-medium text-gray-900 relative"
                    >
                      <XIcon
                        className="h-4 w-4 text-black-600 right-3 top-3 absolute cursor-pointer"
                        onClick={() => {
                          setOpen(false);
                          closePopHandler();
                        }}
                        ref={cancelButtonRef}
                        aria-hidden="true"
                      ></XIcon>
                      {title}
                    </Dialog.Title>
                    <div className="hidden sm:block" aria-hidden="true">
                      <div className="pt-2">
                        <div className="border-t border-gray-200" />
                      </div>
                    </div>

                    <div className="pt-2 w-full px-3  h-96 overflow-auto ">
                      {children}
                    </div>
                  </div>
                </div>
              </div>
              <div className="hidden sm:block" aria-hidden="true">
                      <div className="">
                        <div className="border-t border-gray-200" />
                      </div>
                    </div>
              <div className="bg-gray-50 px-4 py-1.5  sm:px-6 sm:flex sm:flex-row-reverse ">
                <button
                  type="button"
                  className=" w-full inline-flex justify-center border border-gray-300 shadow-sm px-4 py-1 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2   sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                  onClick={() => {
                    setOpen(false);
                    closePopHandler();
                  }}
                  ref={cancelButtonRef}
                >
                  关闭
                </button>
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition.Root>
  );
}