Convert Modal component to Typescript

This commit is contained in:
T'JAMPENS QUENTIN p2406187
2026-02-06 15:11:03 +01:00
parent d79f9f5c84
commit 3c992d5df7
15 changed files with 24 additions and 17 deletions
+38
View File
@@ -0,0 +1,38 @@
import { ReactNode, MouseEvent } from "react";
import { createPortal } from "react-dom";
import styles from "./modal.module.css";
import Button from "../button/button";
interface ModalProps {
open: boolean;
onClose: () => void;
children: ReactNode;
title?: string;
}
const Modal = ({ open, onClose, children, title }: ModalProps) => {
if (!open) return null;
const handleOverlayClick = () => {
onClose();
};
const handleModalClick = (e: MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
};
return createPortal(
<div className={styles.overlay} onClick={handleOverlayClick}>
<div className={styles.modal} onClick={handleModalClick}>
{title && <h2>{title}</h2>}
{children}
<div className={styles.modalFooter}>
<Button onClick={onClose}>Fermer</Button>
</div>
</div>
</div>,
document.body
);
};
export default Modal;