tutor cards added

awaismohammad23 · Dec 7, 2023 · f32345f · f32345f
1 parent ef63091
commit f32345f
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 185 deletions.
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Subjects/Classroom/Quizzess/Quizzes.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Subjects/Classroom/Quizzess/Quizzes.jsx
@@ -1,26 +1,26 @@
 import React, { useState } from "react";
 import QuizCSS from "./Quizzes.module.css";
-import QuizPic from "./quizzes.svg";
+import QuizPic from "./quiz.png";
 
 function Quizzes() {
   const quizzesData = [
     {
       id: 1,
       topic: "Real and Complex Numbers",
       description: "Test for real and complex numbers.",
-      image: "URL_TO_IMAGE_1", // Replace with actual image URL
+      image: {QuizPic}, // Replace with actual image URL
     },
     {
       id: 2,
       topic: "Quadratic Equations",
       description: "Test for quadratic equations using different methods.",
-      image: "URL_TO_IMAGE_2", // Replace with actual image URL
+      image: {QuizPic}, // Replace with actual image URL
     },
     {
       id: 3,
       topic: "Trigonometry",
       description: "Test for trigonometric identities and their usage.",
-      image: "URL_TO_IMAGE_3", // Replace with actual image URL
+      image: {QuizPic}, // Replace with actual image URL
     },
     {
       id: 4,

diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Subjects/Subjects.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Subjects/Subjects.jsx
@@ -80,7 +80,6 @@ function Subjects() {
 
             <div className={styles.TeacherInfo}>
               <img className = {styles.ProfilePicture} src="https://avatars.githubusercontent.com/u/94608299?v=4" alt="Teacher" />
-
               <div className={styles.TeacherName}>
               {selectedSubject.name} 
                 </div>

diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.css
@@ -1,157 +1,60 @@
-.tutor-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px;
-    background-color: #f2f2f2;
-    border-radius: 8px;
-    text-align: center;
-    width: 80%;
-    margin: 0 auto;
-  }
-
-  .tutor-buttons {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-  }
-
-  .tutor-buttons button {
-    margin-right: 10px;
-    padding: 8px 16px;
-    font-size: 16px;
-    border-radius: 8px;
-    border: none;
-    background-color: #f7cb46;
-    color: #fff;
-    cursor: pointer;
-  }
-
-  .tutor-buttons button.active {
-    background-color: #243047;
-  }
-
-  .available-tutors {
-    text-align: center;
-  }
-
-  .available-tutors h2 {
-    margin-bottom: 10px;
-  }
-
-  .available-tutors ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .available-tutors li {
-    padding: 8px;
-    margin-bottom: 5px;
-    background-color: #e1e1e1;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-
-  .available-tutors li:hover {
-    background-color: #d1d1d1;
-  }
-
-  .selected-tutor {
-    margin-top: 20px;
-  }
-
-  .selected-tutor h3 {
-    margin-bottom: 10px;
-  }
-
-  .become-tutor-form {
-    text-align: center;
-  }
-
-  .become-tutor-form h2 {
-    margin-bottom: 10px;
-  }
-
-  .become-tutor-form form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .become-tutor-form label {
-    margin-bottom: 5px;
-  }
-
-  .become-tutor-form input {
-    padding: 8px;
-    margin-bottom: 10px;
-    border-radius: 8px;
-    border: 1px solid #e1e1e1;
-  }
-
-  .become-tutor-form button {
-    padding: 8px 16px;
-    font-size: 16px;
-    border-radius: 8px;
-    border: none;
-    background-color: #f7cb46;
-    color: #fff;
-    cursor: pointer;
-  }
-
-  .become-tutor-form button[type='submit'] {
-    background-color: #243047;
-  }
-  .confirm-tutor-button {
-    margin-top: 10px;
-  }
-
-  .confirm-tutor-button button {
-    padding: 8px 16px;
-    font-size: 16px;
-    border-radius: 8px;
-    border: none;
-    background-color: #f7cb46;
-    color: #fff;
-    cursor: pointer;
-  }
-
-  .confirm-tutor-button button:hover {
-    background-color: #243047;
-  }
+.card {
+  border: 1px solid #5e4949;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+  height: 150px;
+  position: relative;
+  margin: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  margin: 10px;
 
-
-  /* CSS for the AvailableTutor component */
-  .card {
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    padding: 20px;
-    width: 300px;
-    margin: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .top-part {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .profile-pic img {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    object-fit: cover;
-    margin-right: 10px;
-  }
-
-  .bottom-part {
-    margin-top: 20px;
-  }
-
-  .course-description {
-    font-size: 14px;
-  }
-
+  /* 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 */
+}
+
+
+.card:hover {
+  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+} 
+
+.top-part {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.profile-pic img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 10px;
+}
+
+.bottom-part {
+  margin-top: 20px;
+}
+
+h4 {
+  margin: 0;
+  font-size: 18px;
+}
+
+h3 {
+  margin: 5px 0;
+  font-size: 16px;
+}
+
+.course-description {
+  font-size: 14px;
+}
diff --git a/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx b/frontend/src/Components/StudentDashboard/ContentArea/Tutor/Tutor.jsx
@@ -1,6 +1,30 @@
+// Import the necessary React components and CSS file
+
 import React, { useState } from "react";
 import "./Tutor.css";
 
+function TutorCard({ tutor, onSelectTutor }) {
+  return (
+    <div className="card" onClick={() => onSelectTutor(tutor)}>
+      <div className="top-part">
+        <div className="profile-pic">
+          <img
+            src="https://avatars.githubusercontent.com/u/94608299?v=4"
+            alt={`${tutor.name}'s profile`}
+          />
+        </div>
+        <div>
+          <h4>{tutor.name}</h4>
+          <h3>{tutor.subject}</h3>
+        </div>
+      </div>
+      <div className="bottom-part">
+        <p className="course-description">Experience: {tutor.experience}</p>
+      </div>
+    </div>
+  );
+}
+
 function Tutor() {
   const [isHireTutor, setIsHireTutor] = useState(true);
   const [selectedTutor, setSelectedTutor] = useState(null);
@@ -28,7 +52,6 @@ function Tutor() {
     console.log("Tutor confirmed:", selectedTutor);
   };
 
-
   const handleFormChange = (e) => {
     setFormData({
       ...formData,
@@ -49,38 +72,25 @@ function Tutor() {
   };
 
   const availableTutors = [
-    { id: 1, name: "Tutor 1", subject: "Math", experience: "5 years" },
-    { id: 2, name: "Tutor 2", subject: "Science", experience: "3 years" },
-    { id: 3, name: "Tutor 3", subject: "English", experience: "4 years" },
+    { id: 1, name: "Awais Mohammad", subject: "Math", experience: "5 years" },
+    { id: 2, name: "Waqar Amin", subject: "Science", experience: "3 years" },
+    { id: 3, name: "Muhammad Aqib", subject: "English", experience: "4 years" },
   ];
 
   return (
     <div className="tutor-container">
-      <div className="tutor-buttons">
-        <button
-          className={isHireTutor ? "active" : ""}
-          onClick={handleHireTutor}
-        >
-          Hire a Tutor
-        </button>
-        <button
-          className={!isHireTutor ? "active" : ""}
-          onClick={handleBecomeTutor}
-        >
-          Become a Tutor
-        </button>
-      </div>
 
       {isHireTutor ? (
         <div className="available-tutors">
-          <h2>Available Tutors</h2>
-          <ul>
+          <div className="cards-container">
             {availableTutors.map((tutor) => (
-              <li key={tutor.id} onClick={() => handleSelectTutor(tutor)}>
-                {tutor.name}
-              </li>
+              <TutorCard
+                key={tutor.id}
+                tutor={tutor}
+                onSelectTutor={handleSelectTutor}
+              />
             ))}
-          </ul>
+          </div>
           {selectedTutor && (
             <div className="selected-tutor">
               <h3>Selected Tutor:</h3>