change

Author: keraan

overload/src/app/components/selectedCourse.tsx

@@ -1,7 +1,12 @@
-export const SelectedCourse = () => {
+type SelectedCourseProps = {
+    courseCode: string
+    courseName: string
+}
+
+export const SelectedCourse = ({ courseCode, courseName }: SelectedCourseProps) => {
     return (
         <div className="bg-white w-[100%] m-3 rounded-md">
-            SelectedCourse
+            {courseCode}: {courseName}
         </div>
     )
 }

overload/src/app/components/selectedCourses.tsx

@@ -1,21 +1,23 @@
 "use client"
+import { Course } from "../home/page";
 import SelectedCourse from "./selectedCourse";
 import Dropdown from "./termSelectDropDown";
 
 type SelectedCoursesProps = {
+    selectedCourses: Course[]
     handleSelectTerm: (term: number) => void;
 }
 
-export const SelectedCourses = ({ handleSelectTerm }: SelectedCoursesProps) => {
+export const SelectedCourses = ({ selectedCourses, handleSelectTerm }: SelectedCoursesProps) => {
+    const courses = selectedCourses.map((course) => <SelectedCourse key={course.courseCode} courseCode={course.courseCode} courseName={course.courseName}/>)
+
     return (
         <div className="flex flex-col h-[70%]">
             <div className="flex justify-center pb-8">
                 <Dropdown handleSelectTerm={handleSelectTerm}/>
             </div>
             <div className="flex flex-col items-center p-8 bg-black ">
-                <SelectedCourse />
-                <SelectedCourse />
-                <SelectedCourse />
+                {courses}
             </div>
         </div>
     )

overload/src/app/components/termSelectDropDown.tsx

@@ -14,7 +14,7 @@ export default function Dropdown({ handleSelectTerm }: DropdownProps) {
 
   return (
     <div className="w-60">
-      {/* <select
+      <select
         className="block w-full px-4 py-2 mt-2 bg-red-500 border border-gray-200 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
         defaultValue={1}
         // value={selectedOption}
@@ -24,7 +24,7 @@ export default function Dropdown({ handleSelectTerm }: DropdownProps) {
         <option value="term1">Term 1</option>
         <option value="term2">Term 2</option>
         <option value="term3">Term 3</option>
-      </select> */}
+      </select>
     </div>
   );
 }

overload/src/app/home/page.tsx

@@ -2,24 +2,46 @@
 import SelectedCourses from "../components/selectedCourses";
 import CoursesList from "../components/coursesList";
 import { useState } from "react";
+import Navbar from "../components/NavBar";
+
+export type Course = {
+    courseCode: string
+    courseName: string
+}
 
 export const Home = async () => {
-    const [selectedTerm, setSelectedTerm] = useState(1);
+    const [selectedTerm, setSelectedTerm] = useState<number>(1);
+    const [selectedCourses, setSelectedCourses] = useState<Course[]>([
+        {
+            courseCode: "COMP1511",
+            courseName: "Programming fundementalss"
+        }
+    ])
 
     const handleSelectTerm = (term: number) => {
         setSelectedTerm(term);
     }
 
+    const handleSelectCourse = (course: Course) => {
+        const currentlySelectedCourses = [...selectedCourses]
+        if (currentlySelectedCourses.length > 2) return;
+        currentlySelectedCourses.push(course);
+        setSelectedCourses(currentlySelectedCourses);
+    }
 
     return (
         <div className="bg-gray-500 h-[100vh]">
+            {/* <div className="text-center h-[20vh]">
+                hello
+            </div> */}
+            <Navbar />
             <div className="text-center h-[20vh]">
-                top
+                
             </div>
             <div className="flex pr-[8vw] pl-[8vw]">
                 <div className="w-[70%]">
                     {/* Content for the 70% width div */}
-                    <SelectedCourses handleSelectTerm={handleSelectTerm}/>
+                    <SelectedCourses selectedCourses={selectedCourses} handleSelectTerm={handleSelectTerm}/>
                 </div>
                 <div className="w-[30%] bg-black">
                     {/* Content for the 30% width div */}