starting lecture UI

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/EditLecture.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { MonacoEditor } from "@/components/editor/MonacoEditor";
+import { useState } from "react";
+
+export default function EditLecture({ lectureDay }: { lectureDay: string }) {
+  const [text, setText] = useState("");
+  return (
+    <div className="h-full flex flex-col">
+      <div className="columns-2 min-h-0 flex-1">
+        <div className="flex-1 h-full">
+          <MonacoEditor value={text} onChange={setText} />
+        </div>
+        <div className="h-full">
+          {/* <div className="text-red-300">{error && error}</div> */}
+          {/* <AssignmentPreview assignment={assignment} /> */}
+        </div>
+      </div>
+    </div>
+  );
+}

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/layout.tsx

@@ -0,0 +1,23 @@
+import { Suspense } from "react";
+import CourseContextProvider from "../../context/CourseContextProvider";
+
+export default async function LectureLayout({
+  children,
+  params: { courseName, lectureDay },
+}: {
+  children: React.ReactNode;
+  params: { courseName: string; lectureDay: string };
+}) {
+  const decodedCourseName = decodeURIComponent(courseName);
+  if (courseName.includes(".js.map")) {
+    console.log("cannot load course that is .js.map " + decodedCourseName);
+    return <div></div>;
+  }
+  return (
+    <Suspense>
+      <CourseContextProvider localCourseName={decodedCourseName}>
+        {children}
+      </CourseContextProvider>
+    </Suspense>
+  );
+}

nextjs/src/app/course/[courseName]/lecture/[lectureDay]/page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import EditLecture from "./EditLecture";
+
+export default function page({
+  params: { lectureDay },
+}: {
+  params: { lectureDay: string };
+}) {
+  const decodedLectureDay = decodeURIComponent(lectureDay);
+  console.log(decodedLectureDay);
+  return <EditLecture lectureDay={decodedLectureDay} />;
+}