text: import { Fragment, memo, useEffect } from "react";
  import { Transition } from "@headlessui/react";
  import { CheckCircleIcon } from "@heroicons/react/outline";
  import { LinkIcon, XIcon } from "@heroicons/react/solid";
  import PropTypes from "prop-types";
  
  function Success({ type, show, setShow, text, subText }) {
    useEffect(() => {
      if (show) {
        let timer1 = setTimeout(() => setShow(false), 5000);
  
        return () => {
          clearTimeout(timer1);
        };
      }
    }, [show, setShow]);
  
    return (
      <>
        {/* Global notification live region, render this permanently at the end of the document */}
        <div
          aria-live="assertive"
          className="fixed z-50 inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
        >
          <div className="w-full flex flex-col items-center space-y-4 sm:items-end">
            {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
            <Transition
              show={show}
              as={Fragment}
              enter="transform ease-out duration-300 transition"
              enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
              enterTo="translate-y-0 opacity-100 sm:translate-x-0"
              leave="transition ease-in duration-100"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >
              <div className="max-w-sm w-full bg-white dark:bg-gray-700 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
                <div className="p-4">
                  <div className="flex items-start">
                    <div className="flex-shrink-0">
                      {type === "link" ? (
                        <LinkIcon
                          className="h-6 w-6 text-green-400"
                          aria-hidden="true"
                        />
                      ) : (
                        <CheckCircleIcon
                          className="h-6 w-6 text-green-400"
                          aria-hidden="true"
                        />
                      )}
                    </div>
                    <div className="ml-3 w-0 flex-1 pt-0.5">
                      <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
                        {text}
                      </p>
                      <p className="mt-1 text-sm text-gray-500 dark:text-gray-300">
                        {subText}
                      </p>
                    </div>
                    <div className="ml-4 flex-shrink-0 flex">
                      <button
                        className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 dark:text-gray-200 hover:text-gray-500 dark:hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        onClick={() => {
                          setShow(false);
                        }}
                      >
                        <span className="sr-only">Close</span>
                        <XIcon className="h-5 w-5" aria-hidden="true" />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </Transition>
          </div>
        </div>
      </>
    );
  }
  
  export default memo(Success);
  
  Success.defaultProps = {
    type: "default",
  };
  
  Success.propTypes = {
    type: PropTypes.string,
    show: PropTypes.bool.isRequired,
    setShow: PropTypes.func.isRequired,
    text: PropTypes.string.isRequired,
    subText: PropTypes.string,
  };
  
  Success.defaultProps = {
    subText: "",
  };
  