Stage 2: student lesson viewer, Kinescope player, PDF files, prev/next nav, My Courses dashboard

2026-04-07 12:13:12 +05:00
parent 03e3972388
commit 05dd4d1df2
13 changed files with 657 additions and 40 deletions
@@ -0,0 +1,100 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+interface Lesson {
+  id: string;
+  title: string;
+}
+
+interface Module {
+  id: string;
+  title: string;
+  lessons: Lesson[];
+}
+
+interface Course {
+  slug: string;
+  title: string;
+  modules: Module[];
+}
+
+export function CourseSidebar({ course }: { course: Course }) {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      {/* Mobile toggle */}
+      <button
+        className="md:hidden fixed bottom-4 right-4 z-20 btn-aubade px-3 py-2 text-sm"
+        onClick={() => setOpen(!open)}
+      >
+        {open ? "✕" : "☰ Уроки"}
+      </button>
+
+      <aside
+        className={`w-64 shrink-0 flex flex-col overflow-y-auto ${open ? "flex" : "hidden md:flex"}`}
+        style={{
+          borderRight: "2px solid var(--border)",
+          backgroundColor: "var(--background)",
+          maxHeight: "calc(100vh - 53px)",
+          position: "sticky",
+          top: "53px",
+        }}
+      >
+        {/* Course title */}
+        <div className="px-4 py-4" style={{ borderBottom: "2px solid var(--border)" }}>
+          <Link
+            href={`/courses/${course.slug}`}
+            className="font-bold text-sm leading-snug block"
+            style={{ color: "var(--foreground)" }}
+          >
+            {course.title}
+          </Link>
+          <Link
+            href="/dashboard"
+            className="text-xs mt-1 block underline"
+            style={{ color: "var(--muted-foreground)" }}
+          >
+            ← Все курсы
+          </Link>
+        </div>
+
+        {/* Modules and lessons */}
+        <nav className="flex-1 py-2">
+          {course.modules.map((mod) => (
+            <div key={mod.id}>
+              <p
+                className="px-4 py-2 text-xs font-bold uppercase tracking-widest"
+                style={{ color: "var(--muted-foreground)" }}
+              >
+                {mod.title}
+              </p>
+              {mod.lessons.map((lesson) => {
+                const active = pathname.includes(lesson.id);
+                return (
+                  <Link
+                    key={lesson.id}
+                    href={`/courses/${course.slug}/lessons/${lesson.id}`}
+                    className="block px-4 py-2 text-sm leading-snug border-l-2 transition-colors"
+                    style={{
+                      borderLeftColor: active ? "var(--foreground)" : "transparent",
+                      backgroundColor: active ? "var(--color-highlight)" : "transparent",
+                      color: active ? "var(--foreground)" : "var(--foreground)",
+                      fontWeight: active ? 600 : 400,
+                    }}
+                  >
+                    {lesson.title}
+                  </Link>
+                );
+              })}
+            </div>
+          ))}
+        </nav>
+      </aside>
+    </>
+  );
+}