steffen/mms-react-abvanced
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Modal example

Browse Source
This commit is contained in:
e560248
2025-04-08 09:58:49 +02:00
parent 6d7060aceb
commit 0804eba920
4 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
react-advanced-tag1/index.html
View File

@@ -7,6 +7,7 @@
<title>React Advanced Cours</title>
</head>
<body>
<div id="modal"></div>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

18
react-advanced-tag1/src/common/components/Modal.css Normal file
View File

@@ -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;
}

18
react-advanced-tag1/src/common/components/Modal.tsx Normal file
View File

@@ -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>
);
}

22
react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
View File

@@ -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>
);
}