Connect stuff

overload/next.config.js

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {}
 
-module.exports = nextConfig
+module.exports = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/home',
+        permanent: true,
+      },
+    ]
+  },
+}

overload/src/app/components/CourseCard.tsx

@@ -1,14 +1,18 @@
+import Link from 'next/link'
 import React from 'react'
 
-export default function CourseCard(prop: any) {
-  console.log(prop.courseCode);
-  console.log(prop.courseName);
+type CourseCardProps = {
+  courseCode: string
+  courseName: string
+}
+
+export default function CourseCard(prop: CourseCardProps) {
   return (
-    <div className="w-64 h-40 bg-white m-10 p-4 rounded-md">
+    <Link href={`/course-details/${prop.courseCode}`} className="w-64 h-40 bg-white m-10 p-4 rounded-md block">
       <h1>{prop.courseCode}</h1>
       <p>
         {prop.courseName}
       </p>
-    </div>
+    </Link>
   )
 }

overload/src/app/components/NavBar.tsx

@@ -1,6 +1,7 @@
 // components/Navbar.tsx
 import Link from 'next/link';
 import Image from 'next/image';
+import skullSvg from '@/app/resources/skull-head-svgrepo-com.svg'
 
 interface NavbarProps {
   // You can add any additional props if needed
@@ -9,20 +10,20 @@ interface NavbarProps {
 const Navbar: React.FC<NavbarProps> = () => {
   return (
     <nav className="flex justify-between items-center h-16 px-4 bg-white text-black">
-      <div className="flex items-center">
+      <div className="flex items-center gap-4">
         <Link href="/">
-            <Image className='bg-black rounded-full' src="/resources/realskull.jpg" alt="Skull Logo" width={40} height={40} />
+            <Image className='rounded-full' src={skullSvg} alt="Skull Logo" width={40} height={40} />
         </Link>
         <Link href="/">
-            <span className='ml-2'>Home</span>
+            <span className='ml-2 font-bold'>Home</span>
         </Link>
         <Link href="/course-rating">
-            <span  className='ml-2'>Course Rating</span>
+            <span  className='ml-2 font-bold'>Course Rating</span>
         </Link>
       </div>
       <div className="flex items-center">
         {/* Add your profile picture icon */}
-        <img src="/profile-icon.png" alt="Profile Icon" className="w-8 h-8 rounded-full object-cover bg-black" />
+        {/* <Image src="/profile-icon.png" alt="Profile Icon" className="w-8 h-8 rounded-full object-cover bg-black" /> */}
       </div>
     </nav>
   );

overload/src/app/course-details/[...courseCode]/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 import { useEffect, useState } from 'react';
 import ScaleModal from './ScaleModal';
-import Navbar from '@/app/components/NavBar';
+import Image from 'next/image';
+import skullSvg from '@/app/resources/skull-head-svgrepo-com.svg';
 
 export default function Page({ params }: { params: { courseCode: string } }) {
   const [courseData, setCourseData] = useState({
@@ -17,7 +18,6 @@ export default function Page({ params }: { params: { courseCode: string } }) {
       const courseRes = await fetch(
         `http://localhost:3000/api/course-details/${courseCode}`
       ).then((res) => res.json());
-      console.log(courseRes)
 
       setCourseData((prev) => ({
         ...prev,
@@ -30,19 +30,20 @@ export default function Page({ params }: { params: { courseCode: string } }) {
   }, [params.courseCode]);
 
   return (
-
-    <div className="flex bg-black h-screen text-white px-28 py-20 justify-evenly gap-72">
+    <div className="flex bg-black h-screen text-white px-28 py-20 gap-48">
       <div>
         <div className="text-4xl font-bold mb-10">{courseData.courseCode}</div>
         <div>{courseData.description}</div>
       </div>
-      <div className="flex flex-col items-center">
+      <div className="flex flex-col items-center flex-grow">
         <div className="text-4xl font-bold mb-10">OverLoad Scale</div>
         <div
-          className={`w-80 h-80 rounded-full ${
+          className={`w-80 h-80 rounded-full object-cover ${
             courseData.doomness == 1 ? 'bg-green-500' : 'bg-red-500'
           }`}
-        ></div>
+        >
+          <Image src={skullSvg} alt="skull-logo"></Image>
+        </div>
         <button
           className="text-black bg-white rounded-sm px-3 py-2 font-bold text-sm mt-10 hover:opacity-40"
           onClick={() => setIsModalOpen(true)}

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

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

overload/src/app/layout.tsx

@@ -1,22 +1,26 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Navbar from './components/NavBar';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
-  )
+  );
 }