add duration

resources/js/components/Modals.tsx

@@ -0,0 +1,44 @@
+import React, {FC, FormEvent, PropsWithChildren, ReactNode} from "react"
+import ReactDOM from "react-dom"
+
+export const Modal: FC<ModalProps> = ({children, show, closeModal, ...props}) => {
+
+    const stopEvent = (event: FormEvent) => {
+        event.stopPropagation()
+        event.preventDefault()
+    }
+
+    return show && <Overlay onClick={closeModal}>
+        <div className="dark:bg-gray-900 cursor-auto dark:text-white bg-white"
+             onClick={stopEvent}
+             {...props}>
+            {children}
+        </div>
+    </Overlay>
+}
+
+interface ModalProps {
+    children: ReactNode,
+    show: boolean,
+    closeModal: () => void
+}
+
+const Overlay: FC<OverlayProps> = ({children, ...props}) => {
+
+    const app = document.getElementById('app')
+
+    if (app) {
+        return ReactDOM.createPortal(
+            <button className={"flex justify-center items-center w-full fixed inset-0 z-10 bg-gray-900/50"}
+                 {...props}>
+                {children}
+            </button>,
+            app
+        )
+    }
+}
+
+interface OverlayProps {
+    children: ReactNode,
+    onClick: () => void
+}