added modal for new task

src/components/todolist/Modal.jsx

+import { useState } from "react";
+
+export default function Modal({ isOpen, closeModal, saveTask }) {
+    if (!isOpen) return null;
+
+    const [taskName, setTaskName] = useState("");
+
+    const createTask = () => {
+        return {
+            id: crypto.randomUUID(),
+            name: taskName,
+            isCompleted: false
+        }
+    }
+
+    const handleSaveTask = () => {
+        const task = createTask()
+        saveTask(task)
+        closeModal()
+    }
+
+    const handleInputChange = (e) => {
+        setTaskName(e.target.value);
+      };
+
+  return (
+    <div
+  className="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center z-50"
+  style={{ pointerEvents: 'none' }}
+>
+  <div
+    className="absolute inset-0 bg-gray-500 bg-opacity-50"
+    style={{ pointerEvents: 'none' }}
+  ></div>
+
+  <div
+    className="relative bg-white p-6 rounded-lg shadow-lg w-1/3 z-10"
+    style={{ pointerEvents: 'auto' }}
+  >
+    <h2 className="text-xl mb-4">Add a New Task</h2>
+    <p className="mb-4">Enter the task details below:</p>
+
+    <input
+      type="text"
+      className="w-full p-2 mb-4 border border-gray-300 rounded-md"
+      placeholder="Task Name"
+      value={taskName}
+      onChange={handleInputChange}
+    />
+
+    <div className="flex justify-between">
+      <button
+        onClick={closeModal}
+        className="px-4 py-2 bg-red-500 text-white rounded-md"
+      >
+        Close
+      </button>
+      <button
+        className="px-4 py-2 bg-blue-500 text-white rounded-md"
+        onClick={handleSaveTask}
+      >
+        Save Task
+      </button>
+    </div>
+  </div>
+</div>
+  );
+}
\ No newline at end of file

src/pages/Todolist.jsx

 import AddTaskButton from "@components/todolist/AddTaskButton";
+import Modal from "@components/todolist/Modal";
 import TaskList from "@components/todolist/TaskList";
 import { TasksContext } from "@services/Context";
-import { useContext } from "react";
-import { Link } from "react-router-dom";
+import { useContext, useState } from "react";
 
 export default function Todolist() {
     const { tasks, setTasks } = useContext(TasksContext)
-    const addTask = () => {
-        const task = {
-            id: crypto.randomUUID(),
-            name: "Task " + (tasks.length + 1),
-            isCompleted: false
-        }
+    const saveTask = (task) => {
         setTasks([...tasks, task])
     }
 
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const openModal = () => setIsModalOpen(true);
+    const closeModal = () => setIsModalOpen(false);
+
     return (
         <div className="w-full h-screen bg-gray-200 flex justify-center items-start">
       <div className="grid grid-rows-auto gap-4 w-full max-w-md">
@@ -22,7 +21,7 @@ export default function Todolist() {
             <h1 className="text-3xl font-bold text-left mb-6">Today</h1>
         </div>
         <div>
-            <AddTaskButton onClick={addTask}/>
+            <AddTaskButton onClick={openModal}/>
         </div>
         <div>
             {tasks.length > 0 ? (
@@ -31,6 +30,8 @@ export default function Todolist() {
             
         </div>
       </div>
+
+      <Modal isOpen={isModalOpen} closeModal={closeModal} saveTask={saveTask}/>
     </div>
     )
 }
\ No newline at end of file