feat: micro-learning module with seed data

- Add Course and Module models to Prisma schema - Create seed-learn.json with Daily Fiqh for Beginners (5 modules) - Create seed-learn.js with Hermes patch (strip id/courseId from create) - Add /learn page with course listing - Add /learn/[courseSlug]/[moduleId] page with content + quiz - Quiz data stored as JSON string per module - Content rendered as markdown with Key Concept, Details, Reflection, Action Step sections TODO: - Add audio player component for listen toggle - Add progress tracking per user - Add actual quiz scoring/validation - Connect to TTS pipeline for audio generation
2026-06-28 04:27:21 +08:00
commit 1f60f1c908
66 changed files with 4713 additions and 0 deletions
@@ -0,0 +1,125 @@
+import { prisma } from "@/lib/prisma";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+interface Props {
+  params: Promise<{ courseSlug: string; moduleId: string }>;
+}
+
+export default async function ModulePage({ params }: Props) {
+  const { courseSlug, moduleId } = await params;
+
+  const moduleData = await prisma.module.findFirst({
+    where: {
+      id: moduleId,
+      course: { slug: courseSlug },
+    },
+    include: {
+      course: true,
+    },
+  });
+
+  if (!moduleData) return notFound();
+
+  const quiz = moduleData.quizData ? JSON.parse(moduleData.quizData) : null;
+
+  return (
+    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-3xl mx-auto px-4 py-8">
+        {/* Breadcrumb */}
+        <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
+          <Link href="/learn" className="hover:text-emerald-600">
+            Learn
+          </Link>
+          <span>/</span>
+          <span>{moduleData.course.title}</span>
+          <span>/</span>
+          <span className="text-gray-900 dark:text-white font-medium">
+            {moduleData.title}
+          </span>
+        </div>
+
+        {/* Header */}
+        <div className="mb-8">
+          <span className="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded">
+            Module {moduleData.order}
+          </span>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
+            {moduleData.title}
+          </h1>
+          <p className="text-gray-600 dark:text-gray-400 mt-1">
+            {moduleData.description}
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
+          <div
+            className="prose dark:prose-invert max-w-none"
+            dangerouslySetInnerHTML={{ __html: renderMarkdown(moduleData.content) }}
+          />
+        </div>
+
+        {/* Quiz */}
+        {quiz && quiz.length > 0 && (
+          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Quick Check
+            </h2>
+            <div className="space-y-4">
+              {quiz.map((q: any, i: number) => (
+                <div key={i} className="border-b border-gray-100 dark:border-gray-700 last:border-0 pb-4 last:pb-0">
+                  <p className="font-medium text-gray-900 dark:text-white mb-2">
+                    {i + 1}. {q.question}
+                  </p>
+                  <div className="space-y-1">
+                    {q.options.map((opt: string, j: number) => (
+                      <label
+                        key={j}
+                        className="flex items-center gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+                      >
+                        <input
+                          type="radio"
+                          name={`q-${i}`}
+                          className="text-emerald-600"
+                        />
+                        <span className="text-sm text-gray-700 dark:text-gray-300">
+                          {opt}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Navigation */}
+        <div className="flex items-center justify-between mt-8">
+          <Link
+            href="/learn"
+            className="text-sm text-emerald-600 hover:text-emerald-700 font-medium"
+          >
+            ← All Courses
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}
+
+// Simple markdown renderer (production should use a proper library)
+function renderMarkdown(md: string): string {
+  return md
+    .replace(/## 🎯 Key Concept/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">🎯 Key Concept</h2>')
+    .replace(/## 📖 Details/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">📖 Details</h2>')
+    .replace(/## 🤔 Reflection/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">🤔 Reflection</h2>')
+    .replace(/## ⚡ Action Step/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">⚡ Action Step</h2>')
+    .replace(/## /g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">')
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\n\n/g, '</p><p class="mb-4 text-gray-700 dark:text-gray-300">')
+    .replace(/\n/g, '<br>')
+    .replace(/^/, '<p class="mb-4 text-gray-700 dark:text-gray-300">')
+    .replace(/$/, '</p>');
+}