adding header

courseup/package.json

@@ -17,9 +17,11 @@
     "fetch-cookie": "^2.1.0",
     "next": "14.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

courseup/src/components/common/header/components/MiscHeaderButtons.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AiFillGithub } from 'react-icons/ai';
+
+export function MiscHeaderButtons(): JSX.Element {
+  return (
+    <div className="flex">
+      <button className="btn btn-circle btn-ghost">
+        <AiFillGithub size="36" />
+      </button>
+      {/* <IconButton
+        aria-label="toggle dark mode"
+        isRound
+        icon={mode(<MoonIcon fontSize="1.3em" />, <SunIcon fontSize="1.3em" />)}
+        size="sm"
+        onClick={toggleColorMode}
+        colorScheme={mode('purple', 'orange')}
+      /> */}
+    </div>
+  );
+}

courseup/src/components/common/header/components/NavButtons.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import {
+  MdOutlineCalendarViewMonth,
+  MdOutlineConfirmationNumber,
+  MdOutlineLibraryBooks,
+  MdOutlineTravelExplore,
+} from 'react-icons/md';
+
+export function NavButtons(): JSX.Element {
+  const links = [
+    { href: '/explore', label: 'Explore Courses', icon: <MdOutlineTravelExplore /> },
+    { href: '/scheduler', label: 'Timetables', icon: <MdOutlineCalendarViewMonth /> },
+    { href: '/register', label: 'Register', icon: <MdOutlineConfirmationNumber /> },
+    { href: '/booklist', label: 'Booklist', icon: <MdOutlineLibraryBooks /> },
+  ].map((link) => (
+    <li key={link.href} className="md:btn text-xl font-normal md:font-semibold md:btn-sm md:btn-ghost md:join-item">
+      <Link className="flex items-center gap-2" href={link.href}>
+        {link.icon}
+        {link.label}
+      </Link>
+    </li>
+  ));
+  return <>{links}</>;
+}

courseup/src/components/common/header/containers/HeaderContainer.tsx

@@ -1,7 +1,45 @@
+import { Term } from '../../../../../lib/term';
+import { NavButtons } from '../components/NavButtons';
+import { MiscHeaderButtons } from '../components/MiscHeaderButtons';
+
 export function HeaderContainer() {
   return (
-    <div className="navbar">
-      <h1>CourseUp</h1>
+    // <div className="navbar px-3 md:px-5 lg:px-8 w-full flex justify-between shadow-md">
+    //   <a href="/" className="text-xl font-bold">
+    //     CourseUp
+    //   </a>
+    //   <NavButtons />
+    // </div>
+    <div className="navbar flex items-center bg-base-100 shadow-md px-3 md:px-5 lg:px-8">
+      <div className="navbar-start">
+        <div className="dropdown">
+          <div tabIndex={0} role="button" className="btn btn-ghost md:hidden">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" />
+            </svg>
+          </div>
+          <ul tabIndex={0} className="menu dropdown-content bg-base-100 mt-3 p-0 shadow w-72">
+            <NavButtons />
+          </ul>
+        </div>
+        <a href="/" className="text-xl font-bold">
+          CourseUp
+        </a>
+      </div>
+      <div className="navbar-center hidden md:flex">
+        <ul className="join">
+          <NavButtons />
+        </ul>
+      </div>
+      <div className="navbar-end">
+        <MiscHeaderButtons />
+      </div>
     </div>
   );
 }

courseup/tailwind.config.ts

@@ -14,6 +14,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require('daisyui')],
+  plugins: [require('@tailwindcss/typography'), require('daisyui')],
 };
 export default config;

courseup/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "target": "ES5",
     "skipLibCheck": true,
@@ -19,11 +23,20 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
   "ts-node": {
     "esm": true
   }