github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/Modal/index.tsx (about)

     1  import { CloseIcon } from "../../constants/icons";
     2  import { Dialog, Transition } from "@headlessui/react";
     3  import { Fragment, useState } from "react";
     4  import { ModalThemeWrapper, ThemeProvider } from "../../hooks/useTheme";
     5  
     6  const Modal = ({ icon, message, title }) => {
     7    const [open, setOpen] = useState(true);
     8  
     9    return (
    10      <ThemeProvider>
    11        <Transition.Root show={open} as={Fragment}>
    12          <Dialog
    13            as="div"
    14            static
    15            className="fixed z-10 inset-0 overflow-y-auto"
    16            open={open}
    17            onClose={setOpen}
    18          >
    19            <ModalThemeWrapper>
    20              <div className="min-h-screen pt-4 px-4 text-center">
    21                <Transition.Child
    22                  as={Fragment}
    23                  enter="ease-out duration-300"
    24                  enterFrom="opacity-0"
    25                  enterTo="opacity-100"
    26                  leave="ease-in duration-200"
    27                  leaveFrom="opacity-100"
    28                  leaveTo="opacity-0"
    29                >
    30                  <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
    31                </Transition.Child>
    32  
    33                {/* This element is to trick the browser into centering the modal contents. */}
    34                <span
    35                  className="inline-block align-middle h-screen"
    36                  aria-hidden="true"
    37                >
    38                  &#8203;
    39                </span>
    40                <Transition.Child
    41                  as={Fragment}
    42                  enter="ease-out duration-300"
    43                  enterFrom="opacity-0 translate-y-0 scale-95"
    44                  enterTo="opacity-100 translate-y-0 scale-100"
    45                  leave="ease-in duration-200"
    46                  leaveFrom="opacity-100 translate-y-0 scale-100"
    47                  leaveTo="opacity-0 translate-y-0 scale-95"
    48                >
    49                  <div className="inline-block h-full sm:h-auto align-middle bg-dashboard rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all my-8 w-full sm:max-w-xl sm:p-6 lg:max-w-3xl">
    50                    <div className="absolute top-0 right-0 pt-4 pr-4">
    51                      <button
    52                        type="button"
    53                        className="bg-dashboard rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
    54                        onClick={() => setOpen(false)}
    55                      >
    56                        <span className="sr-only">Close</span>
    57                        <CloseIcon className="h-6 w-6" aria-hidden="true" />
    58                      </button>
    59                    </div>
    60                    <div className="flex items-start">
    61                      <div className="flex-shrink-0 flex items-start justify-center h-12 w-12 rounded-full h-12 w-12">
    62                        {icon}
    63                      </div>
    64                      <div className="grow mt-1 ml-4 text-left">
    65                        <Dialog.Title
    66                          as="h2"
    67                          className="text-xl leading-6 font-medium"
    68                        >
    69                          {title}
    70                        </Dialog.Title>
    71                        <div className="mt-2 mb-2">
    72                          <p className="w-full sm:w-11/12 text-sm break-keep whitespace-pre-wrap">
    73                            {message}
    74                          </p>
    75                        </div>
    76                      </div>
    77                    </div>
    78                  </div>
    79                </Transition.Child>
    80              </div>
    81            </ModalThemeWrapper>
    82          </Dialog>
    83        </Transition.Root>
    84      </ThemeProvider>
    85    );
    86  };
    87  
    88  export default Modal;