add Modal example

react-advanced-tag1/src/common/components/Modal.css

@@ -0,0 +1,18 @@
+.modal {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal .modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  padding: 20px;
+  border-radius: 5px;
+}

react-advanced-tag1/src/common/components/Modal.tsx

@@ -0,0 +1,18 @@
+import'./Modal.css';
+
+interface ModalProps {
+    open?: boolean;
+    onClose?: () => void;
+}
+
+export default function Modal({ open= true, onClose }: ModalProps): React.ReactElement {
+    console.log("Modal rendered");
+    return (
+        <div style={{ display: open ? "block" : "none" }} className='modal' onClick={() => onClose && onClose()}>
+          <div className='modal-content'>
+            <h2>Modal</h2>
+            <p>This is a modal component.</p>
+          </div>
+        </div>
+    );
+}

react-advanced-tag1/src/routes/ComponentWrapperPage.tsx

@@ -1,15 +1,19 @@
+import { createPortal } from "react-dom";
 import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
-import EffectExercises from "../common/components/exercises/EffectExercises";
+import Modal from "../common/components/Modal";
+import { useState } from "react";
 
 export default function ComponentWrapperPage() {
+  const [modalOpen, setModalOpen] = useState(false);
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-            <ComponentWrapper title='Komponenten Wrapper Test'>
-                <h1>Hallo</h1>
-            </ComponentWrapper>
-            <ComponentWrapper title='Komponenten Wrapper Test2'>
-                <EffectExercises />
-            </ComponentWrapper>
-    </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+        <ComponentWrapper title='Komponenten Wrapper Test'>
+          <h1>Hallo</h1>
+        </ComponentWrapper>
+        <ComponentWrapper title='Modal Test'>
+          <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
+          {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
+        </ComponentWrapper>
+      </div>
     );
 }