menu added for confirmation of tutor

frontend/src/Components/StudentDashboard/ContentArea/Tutor/Modal.css

@@ -0,0 +1,22 @@
+/* Modal.css */
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .modal-content {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+

frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css

@@ -1,3 +1,5 @@
+/* Tutor.css */
+
 .card {
   border: 1px solid #5e4949;
   border-radius: 8px;
@@ -9,20 +11,16 @@
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   margin: 10px;
-
-  /* now small the space between cards */
   margin-bottom: 50px;
   margin-top: 10px;
-
 }
 
 .cards-container {
   display: flex;
-  flex-wrap: wrap; /* Allow cards to wrap to the next line if there isn't enough space */
-  justify-content: space-between; /* Distribute cards evenly */
+  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
-
 .card:hover {
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
 } 
@@ -58,3 +56,58 @@ h3 {
 .course-description {
   font-size: 14px;
 }
+
+.selected-tutor {
+  text-align: center;
+}
+
+.confirm-tutor-button button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.confirm-tutor-button button:hover {
+  background-color: #45a049;
+}
+
+.become-tutor-form {
+  text-align: center;
+  margin: 20px;
+}
+
+.become-tutor-form form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.become-tutor-form label {
+  margin-top: 10px;
+}
+
+.become-tutor-form input {
+  padding: 8px;
+  margin-top: 5px;
+  width: 200px;
+}
+
+.become-tutor-form button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.become-tutor-form button:hover {
+  background-color: #45a049;
+}
+
+.tutor-container {
+  text-align: center;
+}

frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx

@@ -1,7 +1,8 @@
-// Import the necessary React components and CSS file
+// Tutor.js
 
 import React, { useState } from "react";
 import "./Tutor.css";
+import "./Modal.css";
 
 function TutorCard({ tutor, onSelectTutor }) {
   return (
@@ -25,9 +26,20 @@ function TutorCard({ tutor, onSelectTutor }) {
   );
 }
 
+function Modal({ onClose, children }) {
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
 function Tutor() {
   const [isHireTutor, setIsHireTutor] = useState(true);
   const [selectedTutor, setSelectedTutor] = useState(null);
+  const [showConfirmationMenu, setShowConfirmationMenu] = useState(false);
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -49,7 +61,11 @@ function Tutor() {
 
   const handleConfirmTutor = () => {
     // Perform confirmation logic here
-    console.log("Tutor confirmed:", selectedTutor);
+    setShowConfirmationMenu(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowConfirmationMenu(false);
   };
 
   const handleFormChange = (e) => {
@@ -80,7 +96,6 @@ function Tutor() {
 
   return (
     <div className="tutor-container">
-
       {isHireTutor ? (
         <div className="available-tutors">
           <div className="cards-container">
@@ -101,6 +116,17 @@ function Tutor() {
               <div className="confirm-tutor-button">
                 <button onClick={handleConfirmTutor}>Confirm Tutor</button>
               </div>
+              {showConfirmationMenu && (
+                <Modal onClose={handleCloseModal}>
+                  <div>
+                    <h3>Confirmation Details</h3>
+                    <p>Course Fee: $XXX</p>
+                    <p>Qualification: {selectedTutor.qualification}</p>
+                    {/* Add any other details you want to display */}
+                    <button onClick={handleCloseModal}>Close</button>
+                  </div>
+                </Modal>
+              )}
             </div>
           )}
         </div>