First commit

2026-02-07 18:08:42 -06:00
commit b7a86a2d1c
57 changed files with 9188 additions and 0 deletions
--- a/components/teacher/TeacherNewCourseForm.tsx
+++ b/components/teacher/TeacherNewCourseForm.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import { useRouter } from "next/navigation";
+import { getAllCourseSlugs } from "@/lib/data/courseCatalog";
+import { createTeacherCourse } from "@/lib/data/teacherCourses";
+import type { CourseLevel } from "@/types/course";
+
+const levels: CourseLevel[] = ["Beginner", "Intermediate", "Advanced"];
+
+export default function TeacherNewCourseForm() {
+  const router = useRouter();
+  const [title, setTitle] = useState("");
+  const [level, setLevel] = useState<CourseLevel>("Beginner");
+  const [summary, setSummary] = useState("");
+  const [instructor, setInstructor] = useState("");
+  const [weeks, setWeeks] = useState(4);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+
+    const cleanTitle = title.trim();
+    const cleanSummary = summary.trim();
+    const cleanInstructor = instructor.trim();
+
+    if (!cleanTitle || !cleanSummary || !cleanInstructor) {
+      setError("Title, summary, and instructor are required.");
+      return;
+    }
+
+    const created = createTeacherCourse(
+      {
+        title: cleanTitle,
+        level,
+        summary: cleanSummary,
+        instructor: cleanInstructor,
+        weeks: Math.max(1, weeks),
+      },
+      getAllCourseSlugs(),
+    );
+
+    router.push(`/teacher/courses/${created.slug}/edit`);
+  };
+
+  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">Create Course</h1>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">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>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Level</span>
+        <select
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setLevel(event.target.value as CourseLevel)}
+          value={level}
+        >
+          {levels.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Summary</span>
+        <textarea
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setSummary(event.target.value)}
+          rows={3}
+          value={summary}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Instructor</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          onChange={(event) => setInstructor(event.target.value)}
+          value={instructor}
+        />
+      </label>
+
+      <label className="block">
+        <span className="mb-1 block text-sm text-slate-700">Weeks</span>
+        <input
+          className="w-full rounded-md border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+          min={1}
+          onChange={(event) => setWeeks(Number(event.target.value))}
+          type="number"
+          value={weeks}
+        />
+      </label>
+
+      {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">
+        Create course
+      </button>
+    </form>
+  );
+}