move move frontend to progress-test

app/javascript/components/Modal/Modal.tsx

@@ -0,0 +1,82 @@
+import React, { FC, Fragment } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+
+type Props = {
+  isOpen: boolean
+  setIsOpen: (state: boolean) => void
+  buttons?: any,
+  title: string,
+  className?: string,
+}
+
+export const Modal: FC<Props> = ({
+  isOpen,
+  setIsOpen,
+  children,
+  buttons,
+  title,
+  className = '',
+}) => {
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog
+        open={isOpen}
+        as="div"
+        className={`fixed inset-0 z-10 overflow-y-auto ${className}`}
+        onClose={closeModal}
+      >
+        <div className="min-h-screen px-4 text-center">
+          <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-900 bg-opacity-50" />
+          </Transition.Child>
+
+          <span
+            className="inline-block h-screen align-middle"
+            aria-hidden="true"
+          >
+            &#8203;
+            </span>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded">
+              <Dialog.Title
+                as="h3"
+                className="text-lg font-medium leading-6 text-gray-900 mt-2 mb-4"
+              >
+                {title}
+              </Dialog.Title>
+              <div className="mt-2">
+                {children}
+              </div>
+
+              {buttons &&
+                <div className="mt-4 grid grid-flow-col gap-3">
+                  {buttons}
+                </div>
+              }
+            </div>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition>
+  )
+}