First commit

components/teacher/TeacherNewLessonForm.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { addLessonToTeacherCourse, getTeacherCourseBySlug, teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import type { Course, LessonType } from "@/types/course";
+
+const lessonTypes: LessonType[] = ["video", "reading", "interactive"];
+
+type TeacherNewLessonFormProps = {
+  slug: string;
+};
+
+export default function TeacherNewLessonForm({ slug }: TeacherNewLessonFormProps) {
+  const router = useRouter();
+  const [course, setCourse] = useState<Course | null>(null);
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState<LessonType>("video");
+  const [minutes, setMinutes] = useState(10);
+  const [isPreview, setIsPreview] = useState(false);
+  const [videoUrl, setVideoUrl] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const load = () => setCourse(getTeacherCourseBySlug(slug) ?? null);
+    load();
+    window.addEventListener(teacherCoursesUpdatedEventName, load);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, load);
+  }, [slug]);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    if (!course) {
+      setError("Teacher course not found.");
+      return;
+    }
+
+    if (!title.trim()) {
+      setError("Lesson title is required.");
+      return;
+    }
+
+    addLessonToTeacherCourse(course.slug, {
+      title: title.trim(),
+      type,
+      minutes: Math.max(1, minutes),
+      isPreview,
+      videoUrl: type === "video" ? videoUrl.trim() : undefined,
+    });
+
+    router.push(`/teacher/courses/${course.slug}/edit`);
+  };
+
+  if (!course) {
+    return (
+      <div className="mx-auto max-w-2xl space-y-3 rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Teacher course not found</h1>
+        <p className="text-slate-600">This lesson creator only works for courses created in the teacher area.</p>
+        <Link className="inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/teacher">
+          Back to dashboard
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <form className="mx-auto max-w-2xl space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm" onSubmit={submit}>
+      <h1 className="text-2xl font-bold text-slate-900">Add Lesson</h1>
+      <p className="text-sm text-slate-600">Course: {course.title}</p>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Lesson title</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setTitle(event.target.value)}
+          value={title}
+        />
+      </label>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Type</span>
+          <select
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setType(event.target.value as LessonType)}
+            value={type}
+          >
+            {lessonTypes.map((item) => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Minutes</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            min={1}
+            onChange={(event) => setMinutes(Number(event.target.value))}
+            type="number"
+            value={minutes}
+          />
+        </label>
+      </div>
+
+      <label className="flex items-center gap-2 text-sm text-slate-700">
+        <input checked={isPreview} onChange={(event) => setIsPreview(event.target.checked)} type="checkbox" />
+        Mark as preview lesson
+      </label>
+
+      {type === "video" ? (
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Video URL (placeholder)</span>
+          <input
+            className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setVideoUrl(event.target.value)}
+            placeholder="https://example.com/video"
+            value={videoUrl}
+          />
+        </label>
+      ) : null}
+
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+      <button className="rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+        Save lesson
+      </button>
+    </form>
+  );
+}