Modal Component - Pass 1

src/components/tools/SandboxEditor/SandboxEditor.tsx

@@ -20,7 +20,6 @@ export type ColorSelectProps ={
 }
 
 const ColorSelect = ({color, colorName, changeAccentColor}: ColorSelectProps) => {
-    console.log(color);
     const dimensions = 32;
     return <div
         onClick={() => changeAccentColor(colorName)}

src/components/ui/Modal/Modal.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Modal from './Modal';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+
+
+export default {
+    title: 'UI/Data Display/Modal',
+    component: Modal,
+};
+
+const Template = (args) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+
+    const toggle = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const onClose = () => {
+        setIsOpen(false);
+    };
+
+    return <SandboxEditor>
+        <Modal open={isOpen} onClose={onClose}>
+            <button onClick={toggle} className='bg-green-500 p-2'>Trigger</button>
+        </Modal>
+    </SandboxEditor>;
+};
+
+export const All = Template.bind({});

src/components/ui/Modal/Modal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {FloatingOverlay, FloatingPortal, FloatingFocusManager, useFloating} from '@floating-ui/react';
+
+
+export type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+};
+
+export const Modal: React.FC<ModalProps> = ({open=true, onClose, children}) => {
+    const {context} = useFloating();
+
+    const onCloseHandler = () => {
+        onClose(false);
+    };
+
+    return (
+        <div className="modal">
+            <div className="modal__content">
+                <div>
+                    {children}
+                </div>
+                <div>
+                    {/* Floating Content */}
+                    {
+                        open &&
+                        <FloatingPortal>
+                            <FloatingOverlay className="overlay" lockScroll>
+                                <FloatingFocusManager context={context}>
+                                    <div className='fixed bg-black/80 overflow-auto w-screen h-screen grid place-items-center'>
+                                        <div className='bg-white p-4 inline-block rounded-md shadow-lg'>
+                                            <button onClick={onCloseHandler}>
+                                                Close
+                                            </button>
+                                            <div>
+                                                Modal Content
+                                                <div>
+                                                    <input type="text" autoFocus />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </FloatingFocusManager>
+                            </FloatingOverlay>
+                        </FloatingPortal>
+
+
+                    }
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+export default Modal;