Added styling changes to course rating page and cleaned up code

Author: FlyingChilli04

overload/src/app/components/CourseCard.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function CourseCard(prop: any) {
+
+  return (
+    <div className="w-64 h-40 bg-white m-10 p-4 rounded-md">
+      <p>
+        {prop.description}
+      </p>
+    </div>
+  )
+}

overload/src/app/course-rating/SearchBar.tsx renamed to overload/src/app/components/SearchBar.tsx

@@ -1,5 +1,6 @@
 'use client';
 import React from 'react'
+import CourseCard from './CourseCard';
 
 export const SearchBar = () => {
   const [searchTerm, setSearchTerm] = React.useState('');
@@ -20,14 +21,27 @@ export const SearchBar = () => {
     (item as { name: string }).name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
+  const courseCards = filteredData.map(item => {
+    return (
+      <div>
+        <CourseCard
+        description={(item as { name: string }).name}
+        />
+      </div>
+    );
+  })
+
   return (
-    <div className="text-center py-4">
-      <input className="bg-white py-0.1 text-center text-0.5xl border border-black rounded-md" type="text" placeholder="search a course" value={searchTerm} onChange={e => setSearchTerm(e.target.value)}/>
-      <ul className="flex flex-wrap">
-        {filteredData.map((item) => (
-          <li className="w-64 h-40 bg-white m-10 p-4 rounded-md" key={(item as { name: string }).name}>{(item as { name: string }).name} </li>
-        ))}
+    <div className="justify-center">
+      <div className="px-20">
+        <input className="px-3 w-full bg-white py-0.1 text-0.5xl border border-black rounded-md text-left placeholder-left" type="text" placeholder="search for a course..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)}/>
+      </div>
+      <ul className="flex flex-wrap justify-center">
+        {courseCards}
       </ul>
     </div>
   )
 }
+
+// create card item
+// create array of card using mapping

overload/src/app/course-rating/page.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { SearchBar } from "./SearchBar"
+import { SearchBar } from "../components/SearchBar"
 
 export default function CourseRatingPage() {
   return (
     <div className="@apply bg-[#221f1f]">
       {/* <NavBar/> */}
-      <h1 className="font-sans text-5xl text-white font-semibold text-center p-5">OverLoad</h1>
+      <h1 className="pt-20 font-sans text-5xl text-white font-semibold p-5 text-left px-20">OverLoad</h1>
       <SearchBar/>
       {/* <SortButton/> */}
     </div>

overload/src/app/globals.css

@@ -17,5 +17,5 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-}
+  background-color: #221f1f;
+}