First commit

app/(public)/courses/[slug]/page.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import ProgressBar from "@/components/ProgressBar";
+import { getCourseBySlug } from "@/lib/data/courseCatalog";
+import { getCourseProgressPercent, progressUpdatedEventName } from "@/lib/progress/localProgress";
+import { teacherCoursesUpdatedEventName } from "@/lib/data/teacherCourses";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+import type { Course } from "@/types/course";
+
+export default function CourseDetailPage() {
+  const params = useParams<{ slug: string }>();
+  const slug = params.slug;
+  const [course, setCourse] = useState<Course | undefined>(() => getCourseBySlug(slug));
+  const [hasResolvedCourse, setHasResolvedCourse] = useState(false);
+
+  const [userId, setUserId] = useState("guest");
+  const [isAuthed, setIsAuthed] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const loadCourse = () => {
+      setCourse(getCourseBySlug(slug));
+      setHasResolvedCourse(true);
+    };
+    loadCourse();
+    window.addEventListener(teacherCoursesUpdatedEventName, loadCourse);
+    return () => window.removeEventListener(teacherCoursesUpdatedEventName, loadCourse);
+  }, [slug]);
+
+  useEffect(() => {
+    const client = supabaseBrowser();
+    if (!client) return;
+
+    client.auth.getUser().then(({ data }) => {
+      const nextId = data.user?.id ?? "guest";
+      setUserId(nextId);
+      setIsAuthed(Boolean(data.user));
+    });
+
+    const { data } = client.auth.onAuthStateChange((_event, session) => {
+      setUserId(session?.user?.id ?? "guest");
+      setIsAuthed(Boolean(session?.user));
+    });
+
+    return () => data.subscription.unsubscribe();
+  }, []);
+
+  useEffect(() => {
+    if (!course) return;
+    const load = () => setProgress(getCourseProgressPercent(userId, course.slug, course.lessons.length));
+    load();
+    window.addEventListener(progressUpdatedEventName, load);
+    return () => window.removeEventListener(progressUpdatedEventName, load);
+  }, [course, userId]);
+
+  if (!course && !hasResolvedCourse) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <p className="text-slate-600">Loading course...</p>
+      </div>
+    );
+  }
+
+  if (!course) {
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+        <h1 className="text-2xl font-bold text-slate-900">Course not found</h1>
+        <p className="mt-2 text-slate-600">The requested course slug does not exist in mock data.</p>
+        <Link className="mt-4 inline-flex rounded-md bg-ink px-4 py-2 text-sm font-semibold text-white" href="/courses">
+          Back to courses
+        </Link>
+      </div>
+    );
+  }
+
+  const redirect = `/courses/${course.slug}/learn`;
+  const loginUrl = `/auth/login?redirectTo=${encodeURIComponent(redirect)}`;
+
+  return (
+    <div className="grid gap-7 lg:grid-cols-[1.9fr_0.9fr]">
+      <section className="pt-1">
+        <Link className="inline-flex items-center gap-2 text-lg text-slate-600 hover:text-brand md:text-2xl" href="/courses">
+          <span className="text-xl">{"<-"}</span>
+          Back to Courses
+        </Link>
+
+        <div className="mt-6 flex items-center gap-3 text-base text-slate-600 md:text-lg">
+          <span className="rounded-full bg-accent px-4 py-1 text-base font-semibold text-white">{course.level}</span>
+          <span>Contract Law</span>
+        </div>
+
+        <h1 className="acve-heading mt-5 text-4xl leading-tight md:text-7xl">{course.title}</h1>
+        <p className="mt-5 max-w-5xl text-xl leading-relaxed text-slate-600 md:text-4xl">{course.summary}</p>
+
+        <div className="mt-7 flex flex-wrap items-center gap-5 text-lg text-slate-600 md:text-3xl">
+          <span className="font-semibold text-slate-800">Rating {course.rating.toFixed(1)}</span>
+          <span>{course.students.toLocaleString()} students</span>
+          <span>{course.weeks} weeks</span>
+          <span>{course.lessonsCount} lessons</span>
+        </div>
+      </section>
+
+      <aside className="acve-panel space-y-5 p-7">
+        <h2 className="text-2xl text-slate-700 md:text-4xl">Your Progress</h2>
+        <div className="flex items-end justify-between">
+          <p className="text-4xl font-semibold text-brand md:text-6xl">{progress}%</p>
+          <p className="text-lg text-slate-600 md:text-3xl">
+            {Math.round((progress / 100) * course.lessonsCount)}/{course.lessonsCount} lessons
+          </p>
+        </div>
+        <ProgressBar value={progress} />
+        <div className="border-t border-slate-200 pt-5 text-lg text-slate-700 md:text-3xl">
+          <p className="mb-1 text-base text-slate-500 md:text-2xl">Instructor</p>
+          <p className="mb-4 font-semibold text-slate-800">{course.instructor}</p>
+          <p className="mb-1 text-base text-slate-500 md:text-2xl">Duration</p>
+          <p className="mb-4 font-semibold text-slate-800">{course.weeks} weeks</p>
+          <p className="mb-1 text-base text-slate-500 md:text-2xl">Level</p>
+          <p className="font-semibold text-slate-800">{course.level}</p>
+        </div>
+        {isAuthed ? (
+          <Link className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105" href={redirect}>
+            Start Course
+          </Link>
+        ) : (
+          <Link className="acve-button-primary mt-2 inline-flex w-full justify-center px-4 py-3 text-xl font-semibold md:text-2xl hover:brightness-105" href={loginUrl}>
+            Login to start
+          </Link>
+        )}
+      </aside>
+    </div>
+  );
+}