Convert Modal component to Typescript

src/components/Footer/Footer.jsx

@@ -1,7 +1,7 @@
 import styles from "./Footer.module.css"
 import {Link} from "react-router";
 import {useState} from "react";
-import Modal from "../ui/modal/modal.jsx";
+import Modal from "../ui/modal/modal.tsx";
 import Button from "../ui/button/button.tsx";
 import scrollToTop from "../../utils/scrollToTop.js";
 

src/components/createEventBtn/CreateEventBtn.jsx

@@ -1,6 +1,6 @@
 import styles from "./createEventBtn.module.css"
 import { useState, useContext } from "react";
-import Modal from "../ui/modal/modal.jsx";
+import Modal from "../ui/modal/modal.tsx";
 import Button from "../ui/button/button.tsx";
 import TextInput from "../ui/input/input.tsx";
 import { EventContext } from "../../contexts/events/EventContext.js";

src/components/ui/modal/modal.tsx

@@ -1,16 +1,23 @@
+import { ReactNode, MouseEvent } from "react";
 import { createPortal } from "react-dom";
 import styles from "./modal.module.css";
-import Button from "../button/button.tsx";
+import Button from "../button/button";
 
-const Modal = ({ open, onClose, children, title }) => {
+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) => {
+    const handleModalClick = (e: MouseEvent<HTMLDivElement>) => {
         e.stopPropagation();
     };