Convert Modal component to Typescript

src/pages/Admin/components/pendingMembers/PendingMembers.jsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from "react";
 import Button from "../../../../components/ui/button/button.tsx";
 import styles from "./PendingMembers.module.css";
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import getUserToValidate from "../../../../utils/users/getUserToValidate.js";
 import getUserById from "../../../../utils/users/getUserById.js";
 import validateUser from "../../../../utils/users/validateUser.js";

src/pages/Login/components/loginform/loginForm.jsx

@@ -2,7 +2,7 @@ import { useState, useContext } from "react";
 import styles from "./loginForm.module.css";
 import Button from "../../../../components/ui/button/button.tsx";
 import Input from "../../../../components/ui/input/input.tsx";
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import { useNavigate } from "react-router";
 import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
 

src/pages/Profile/components/SettingsModal/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import Button from "../../../../components/ui/button/button.tsx";
 import styles from "./SettingsModal.module.css"
 import { useContext, useState } from "react";

src/pages/Register/RegisterPage.jsx

@@ -6,7 +6,7 @@ import {useContext, useEffect, useState} from "react";
 import register from "../../utils/register.js";
 import { useNavigate } from "react-router";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
-import Modal from "../../components/ui/modal/modal.jsx";
+import Modal from "../../components/ui/modal/modal.tsx";
 
 
 function RegisterPage() {

src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx

@@ -1,5 +1,5 @@
 import Button from "../../../../components/ui/button/button.tsx";
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import {useContext, useState} from "react";
 import styles from "./manageMember.module.css"
 import DeactivateMemberBtn from "./deactivateMember/deactivateMemberBtn.jsx";

src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx

@@ -1,5 +1,5 @@
 import Button from "../../../../../components/ui/button/button.tsx";
-import Modal from "../../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../../components/ui/modal/modal.tsx";
 import { useState } from "react";
 import deactivateUser from "../../../../../utils/users/deactivateUser.js"
 import { useNavigate } from "react-router";

src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx

@@ -3,7 +3,7 @@ import Button from "../../../../../components/ui/button/button.tsx";
 import modifyRole from "../../../../../utils/users/modifyRole.js";
 import { useState, useEffect } from "react";
 import getRoles from "../../../../../utils/getRoles.js";
-import Modal from "../../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../../components/ui/modal/modal.tsx";
 
 export default function ModifyRole({ user }) {
 

src/pages/eventDetail/components/EventTask/EventTask.jsx

@@ -5,7 +5,7 @@ import assign from "../../../../utils/tasks/assign.js";
 import unAssign from "../../../../utils/tasks/unAssign.js";
 import { useContext, useEffect, useState } from "react";
 import isAssigned from "../../../../utils/tasks/isAssigned.js";
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
 import DeleteTaskBtn from "../deleteTaskBtn/deleteTaskBtn.jsx";
 

src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx

@@ -2,7 +2,7 @@ import styles from "../../eventDetail.module.css";
 import Button from "../../../../components/ui/button/button.tsx";
 import {useContext, useState} from "react";
 import TextInput from "../../../../components/ui/input/input.tsx";
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import createTaskApi from "../../../../utils/tasks/createTask.js";
 import {EventDetailContext} from "../../../../contexts/eventDetail/eventDetail.js";
 

src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx

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

src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx

@@ -3,7 +3,7 @@ import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
 import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";
 import Button from "../../../../components/ui/button/button.tsx";
 import { useState } from "react";
-import Modal from "../../../../components/ui/modal/modal.jsx";
+import Modal from "../../../../components/ui/modal/modal.tsx";
 import styles from "../../eventDetail.module.css";
 
 export default function DeleteTaskBtn({ taskId, eventId, taskName }) {