565 lines
24 KiB
TypeScript
565 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useState, useTransition } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { Check, CircleDashed, ClipboardCheck, FileText, Lock, PlayCircle } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { toggleLessonComplete } from "@/app/(public)/courses/[slug]/learn/actions";
|
|
import ProgressBar from "@/components/ProgressBar";
|
|
import { markdownToSafeHtml } from "@/lib/courses/lessonMarkdown";
|
|
import {
|
|
getLessonContentTypeLabel,
|
|
isFinalExam,
|
|
type LessonActivityMeta,
|
|
type LessonContentType,
|
|
} from "@/lib/courses/lessonContent";
|
|
|
|
type ClassroomLesson = {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
lectureContent: string;
|
|
activity: LessonActivityMeta | null;
|
|
contentType: LessonContentType;
|
|
materialUrl: string | null;
|
|
videoUrl: string | null;
|
|
youtubeUrl: string | null;
|
|
estimatedDuration: number;
|
|
isFreePreview: boolean;
|
|
};
|
|
|
|
type ClassroomModule = {
|
|
id: string;
|
|
title: string;
|
|
lessons: ClassroomLesson[];
|
|
};
|
|
|
|
type StudentClassroomClientProps = {
|
|
courseSlug: string;
|
|
courseTitle: string;
|
|
modules: ClassroomModule[];
|
|
initialSelectedLessonId: string;
|
|
initialCompletedLessonIds: string[];
|
|
isEnrolled: boolean;
|
|
};
|
|
|
|
type CompletionCertificate = {
|
|
certificateId: string;
|
|
certificateNumber: string | null;
|
|
};
|
|
|
|
type ActivityResult = {
|
|
score: number;
|
|
correct: number;
|
|
total: number;
|
|
passed: boolean;
|
|
questionResults: Record<string, boolean>;
|
|
};
|
|
|
|
function getYouTubeEmbedUrl(url: string | null | undefined): string | null {
|
|
if (!url?.trim()) return null;
|
|
const trimmed = url.trim();
|
|
const watchMatch = trimmed.match(/(?:youtube\.com\/watch\?v=)([a-zA-Z0-9_-]+)/);
|
|
if (watchMatch) return `https://www.youtube.com/embed/${watchMatch[1]}`;
|
|
const embedMatch = trimmed.match(/(?:youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/);
|
|
if (embedMatch) return trimmed;
|
|
const shortMatch = trimmed.match(/(?:youtu\.be\/)([a-zA-Z0-9_-]+)/);
|
|
if (shortMatch) return `https://www.youtube.com/embed/${shortMatch[1]}`;
|
|
return null;
|
|
}
|
|
|
|
function getIsPdfUrl(url: string | null | undefined): boolean {
|
|
if (!url) return false;
|
|
return /\.pdf(?:$|\?)/i.test(url.trim());
|
|
}
|
|
|
|
function isAssessmentType(contentType: LessonContentType): boolean {
|
|
return contentType === "ACTIVITY" || contentType === "QUIZ" || contentType === "FINAL_EXAM";
|
|
}
|
|
|
|
export default function StudentClassroomClient({
|
|
courseSlug,
|
|
courseTitle,
|
|
modules,
|
|
initialSelectedLessonId,
|
|
initialCompletedLessonIds,
|
|
isEnrolled,
|
|
}: StudentClassroomClientProps) {
|
|
const router = useRouter();
|
|
const [isSaving, startTransition] = useTransition();
|
|
const [selectedLessonId, setSelectedLessonId] = useState(initialSelectedLessonId);
|
|
const [completedLessonIds, setCompletedLessonIds] = useState(initialCompletedLessonIds);
|
|
const [completionCertificate, setCompletionCertificate] = useState<CompletionCertificate | null>(null);
|
|
const [activityAnswers, setActivityAnswers] = useState<Record<string, string>>({});
|
|
const [activityResult, setActivityResult] = useState<ActivityResult | null>(null);
|
|
|
|
useEffect(() => {
|
|
setSelectedLessonId(initialSelectedLessonId);
|
|
}, [initialSelectedLessonId]);
|
|
|
|
useEffect(() => {
|
|
setCompletedLessonIds(initialCompletedLessonIds);
|
|
}, [initialCompletedLessonIds]);
|
|
|
|
const flatLessons = useMemo(() => modules.flatMap((module) => module.lessons), [modules]);
|
|
const completedSet = useMemo(() => new Set(completedLessonIds), [completedLessonIds]);
|
|
|
|
const totalLessons = flatLessons.length;
|
|
const completedCount = completedLessonIds.length;
|
|
const progressPercent = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;
|
|
|
|
const selectedLesson =
|
|
flatLessons.find((lesson) => lesson.id === selectedLessonId) ?? flatLessons[0] ?? null;
|
|
|
|
useEffect(() => {
|
|
setActivityAnswers({});
|
|
setActivityResult(null);
|
|
}, [selectedLesson?.id]);
|
|
|
|
const selectedLessonTypeLabel = selectedLesson ? getLessonContentTypeLabel(selectedLesson.contentType) : "";
|
|
const selectedLessonActivity = selectedLesson?.activity?.questions?.length ? selectedLesson.activity : null;
|
|
const selectedLectureHtml = markdownToSafeHtml(selectedLesson?.lectureContent || selectedLesson?.description || "");
|
|
|
|
const isRestricted = (lessonId: string) => {
|
|
if (!isEnrolled) return false;
|
|
const lessonIndex = flatLessons.findIndex((lesson) => lesson.id === lessonId);
|
|
if (lessonIndex <= 0) return false;
|
|
if (completedSet.has(lessonId)) return false;
|
|
const previousLesson = flatLessons[lessonIndex - 1];
|
|
return !completedSet.has(previousLesson.id);
|
|
};
|
|
|
|
const isLockedForUser = (lesson: ClassroomLesson) => !isEnrolled && !lesson.isFreePreview;
|
|
|
|
const navigateToLesson = (lessonId: string) => {
|
|
if (isRestricted(lessonId)) return;
|
|
setSelectedLessonId(lessonId);
|
|
router.push(`/courses/${courseSlug}/learn?lesson=${lessonId}`, { scroll: false });
|
|
};
|
|
|
|
const handleToggleComplete = async () => {
|
|
if (!selectedLesson || isSaving || !isEnrolled) return;
|
|
|
|
const lessonId = selectedLesson.id;
|
|
const wasCompleted = completedSet.has(lessonId);
|
|
|
|
setCompletedLessonIds((prev) =>
|
|
wasCompleted ? prev.filter((id) => id !== lessonId) : [...prev, lessonId],
|
|
);
|
|
|
|
startTransition(async () => {
|
|
const result = await toggleLessonComplete({ courseSlug, lessonId });
|
|
|
|
if (!result.success) {
|
|
setCompletedLessonIds((prev) =>
|
|
wasCompleted ? [...prev, lessonId] : prev.filter((id) => id !== lessonId),
|
|
);
|
|
return;
|
|
}
|
|
|
|
setCompletedLessonIds((prev) => {
|
|
if (result.isCompleted) {
|
|
return prev.includes(lessonId) ? prev : [...prev, lessonId];
|
|
}
|
|
return prev.filter((id) => id !== lessonId);
|
|
});
|
|
|
|
if (result.newlyIssuedCertificate && result.certificateId) {
|
|
setCompletionCertificate({
|
|
certificateId: result.certificateId,
|
|
certificateNumber: result.certificateNumber ?? null,
|
|
});
|
|
}
|
|
|
|
router.refresh();
|
|
});
|
|
};
|
|
|
|
const submitActivity = async () => {
|
|
if (!selectedLesson || !selectedLessonActivity) return;
|
|
|
|
const total = selectedLessonActivity.questions.length;
|
|
if (total === 0) return;
|
|
|
|
const unanswered = selectedLessonActivity.questions.filter((question) => !activityAnswers[question.id]);
|
|
if (unanswered.length > 0) {
|
|
toast.error("Responde todas las preguntas antes de enviar.");
|
|
return;
|
|
}
|
|
|
|
let correct = 0;
|
|
const questionResults: Record<string, boolean> = {};
|
|
|
|
for (const question of selectedLessonActivity.questions) {
|
|
const answerId = activityAnswers[question.id];
|
|
const selectedOption = question.options.find((option) => option.id === answerId);
|
|
const isCorrect = Boolean(selectedOption?.isCorrect);
|
|
if (isCorrect) correct += 1;
|
|
questionResults[question.id] = isCorrect;
|
|
}
|
|
|
|
const score = Math.round((correct / total) * 100);
|
|
const passingScore = selectedLesson.contentType === "ACTIVITY" ? 0 : selectedLessonActivity.passingScorePercent;
|
|
const passed = selectedLesson.contentType === "ACTIVITY" ? true : score >= passingScore;
|
|
|
|
setActivityResult({ score, correct, total, passed, questionResults });
|
|
|
|
if (passed && isEnrolled && !completedSet.has(selectedLesson.id)) {
|
|
await handleToggleComplete();
|
|
}
|
|
};
|
|
|
|
if (!selectedLesson) {
|
|
return (
|
|
<div className="rounded-xl border border-slate-200 bg-white p-6">
|
|
<h1 className="text-2xl font-semibold text-slate-900">No lessons available yet</h1>
|
|
<p className="mt-2 text-sm text-slate-600">This course does not have lessons configured.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="relative grid gap-6 lg:grid-cols-[1.7fr_1fr]">
|
|
{completionCertificate ? (
|
|
<>
|
|
<div className="pointer-events-none fixed inset-0 z-40 overflow-hidden">
|
|
{Array.from({ length: 36 }).map((_, index) => (
|
|
<span
|
|
key={`confetti-${index}`}
|
|
className="absolute top-[-24px] h-3 w-2 rounded-sm opacity-90"
|
|
style={{
|
|
left: `${(index * 2.7) % 100}%`,
|
|
backgroundColor: ["#0ea5e9", "#22c55e", "#f59e0b", "#a855f7", "#ef4444"][index % 5],
|
|
animation: `acve-confetti-fall ${2.2 + (index % 5) * 0.35}s linear ${index * 0.04}s 1`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/55 p-4">
|
|
<div className="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-6 shadow-2xl">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-emerald-600">Course completed</p>
|
|
<h2 className="mt-2 text-3xl font-semibold text-slate-900">Congratulations</h2>
|
|
<p className="mt-2 text-sm text-slate-600">
|
|
You completed all lessons in this course and your ACVE certificate was issued.
|
|
</p>
|
|
<p className="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-sm text-slate-700">
|
|
Certificate: {completionCertificate.certificateNumber ?? "Issued"}
|
|
</p>
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
<a
|
|
className="acve-button-primary inline-flex px-4 py-2 text-sm font-semibold"
|
|
href={`/api/certificates/${completionCertificate.certificateId}/pdf`}
|
|
>
|
|
Download PDF
|
|
</a>
|
|
<Link
|
|
className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
|
|
href="/profile"
|
|
>
|
|
Open Profile
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={() => setCompletionCertificate(null)}
|
|
className="rounded-md border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style jsx global>{`
|
|
@keyframes acve-confetti-fall {
|
|
0% {
|
|
transform: translateY(-24px) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translateY(110vh) rotate(540deg);
|
|
}
|
|
}
|
|
`}</style>
|
|
</>
|
|
) : null}
|
|
|
|
<section className="space-y-4 rounded-xl border border-slate-200 bg-white p-5">
|
|
<Link href={`/courses/${courseSlug}`} className="text-sm font-medium text-slate-600 hover:text-slate-900">
|
|
{"<-"} Back to Course
|
|
</Link>
|
|
|
|
<div
|
|
className={`overflow-hidden rounded-xl border border-slate-200 ${
|
|
selectedLesson.contentType === "VIDEO" ? "aspect-video bg-black" : "bg-slate-50 p-5"
|
|
}`}
|
|
>
|
|
{isLockedForUser(selectedLesson) ? (
|
|
<div className="flex h-full min-h-[220px] flex-col items-center justify-center gap-4 bg-slate-900 p-6 text-center">
|
|
<p className="text-lg font-medium text-white">Contenido premium</p>
|
|
<p className="max-w-sm text-sm text-slate-300">
|
|
Inscríbete en el curso para desbloquear todas las secciones y registrar tu avance.
|
|
</p>
|
|
<Link
|
|
href={`/courses/${courseSlug}`}
|
|
className="rounded-md bg-white px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-100"
|
|
>
|
|
Ver curso e inscripción
|
|
</Link>
|
|
</div>
|
|
) : selectedLesson.contentType === "VIDEO" ? (
|
|
getYouTubeEmbedUrl(selectedLesson.youtubeUrl) ? (
|
|
<iframe
|
|
key={`${selectedLesson.id}-${selectedLesson.youtubeUrl}`}
|
|
className="h-full w-full"
|
|
src={getYouTubeEmbedUrl(selectedLesson.youtubeUrl)!}
|
|
title={selectedLesson.title}
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowFullScreen
|
|
/>
|
|
) : selectedLesson.videoUrl ? (
|
|
<video
|
|
key={`${selectedLesson.id}-${selectedLesson.videoUrl}`}
|
|
className="h-full w-full"
|
|
controls
|
|
onEnded={() => {
|
|
if (isEnrolled) {
|
|
void handleToggleComplete();
|
|
}
|
|
}}
|
|
src={selectedLesson.videoUrl}
|
|
/>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center text-sm text-slate-300">
|
|
Video not available for this lesson
|
|
</div>
|
|
)
|
|
) : selectedLesson.contentType === "LECTURE" ? (
|
|
<article
|
|
className="space-y-4 text-[16px] leading-8 text-slate-800 [&_a]:font-medium [&_a]:text-blue-700 [&_a]:underline [&_blockquote]:rounded-r-md [&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 [&_blockquote]:bg-slate-100 [&_blockquote]:px-4 [&_blockquote]:py-2 [&_h1]:mt-6 [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:mt-5 [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:mt-4 [&_h3]:text-xl [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:space-y-2 [&_ol]:pl-7 [&_p]:my-3 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-7"
|
|
dangerouslySetInnerHTML={{ __html: selectedLectureHtml }}
|
|
/>
|
|
) : isAssessmentType(selectedLesson.contentType) && selectedLessonActivity ? (
|
|
<div className="space-y-4">
|
|
<p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
|
{selectedLessonTypeLabel}
|
|
</p>
|
|
|
|
{selectedLessonActivity.instructions ? (
|
|
<p className="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm leading-relaxed text-slate-700">
|
|
{selectedLessonActivity.instructions}
|
|
</p>
|
|
) : null}
|
|
|
|
<div className="space-y-3">
|
|
{selectedLessonActivity.questions.map((question, index) => (
|
|
<div key={question.id} className="rounded-xl border border-slate-200 bg-white p-4">
|
|
<p className="text-sm font-semibold text-slate-900">
|
|
{index + 1}. {question.prompt}
|
|
</p>
|
|
<div className="mt-3 grid gap-2">
|
|
{question.options.map((option) => {
|
|
const isSelected = activityAnswers[question.id] === option.id;
|
|
const showResult = Boolean(activityResult);
|
|
const isCorrect = option.isCorrect;
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
onClick={() =>
|
|
setActivityAnswers((prev) => ({
|
|
...prev,
|
|
[question.id]: option.id,
|
|
}))
|
|
}
|
|
className={`rounded-lg border px-3 py-2 text-left text-sm transition-colors ${
|
|
isSelected ? "border-slate-500 bg-slate-900 text-white" : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50"
|
|
} ${
|
|
showResult && isCorrect
|
|
? "border-emerald-300 bg-emerald-50 text-emerald-900"
|
|
: ""
|
|
}`}
|
|
>
|
|
{option.text}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
{activityResult && question.explanation ? (
|
|
<p className="mt-3 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-600">
|
|
{question.explanation}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => void submitActivity()}
|
|
className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800"
|
|
>
|
|
Enviar respuestas
|
|
</button>
|
|
|
|
{activityResult ? (
|
|
<div
|
|
className={`rounded-lg border px-4 py-3 text-sm ${
|
|
activityResult.passed
|
|
? "border-emerald-200 bg-emerald-50 text-emerald-900"
|
|
: "border-amber-200 bg-amber-50 text-amber-900"
|
|
}`}
|
|
>
|
|
Resultado: {activityResult.correct}/{activityResult.total} ({activityResult.score}%)
|
|
{selectedLesson.contentType !== "ACTIVITY" ? (
|
|
<span>
|
|
{" "}
|
|
| Mínimo: {selectedLessonActivity.passingScorePercent}%{" "}
|
|
{activityResult.passed ? "(Aprobado)" : "(No aprobado)"}
|
|
</span>
|
|
) : (
|
|
<span> | Actividad completada</span>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
|
|
{isFinalExam(selectedLesson.contentType) ? (
|
|
<div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
|
|
Debes aprobar esta evaluación final para graduarte y emitir el certificado del curso.
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<p className="inline-flex rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
|
{selectedLessonTypeLabel}
|
|
</p>
|
|
{selectedLesson.description ? (
|
|
<p className="text-sm leading-relaxed text-slate-700">{selectedLesson.description}</p>
|
|
) : (
|
|
<p className="text-sm text-slate-600">Este contenido no tiene descripción adicional.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{selectedLesson.materialUrl ? (
|
|
getIsPdfUrl(selectedLesson.materialUrl) ? (
|
|
<iframe
|
|
className="h-[430px] w-full rounded-lg border border-slate-200 bg-white"
|
|
src={selectedLesson.materialUrl}
|
|
title={`${selectedLesson.title} material`}
|
|
/>
|
|
) : (
|
|
<a
|
|
className="inline-flex rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 hover:bg-slate-100"
|
|
href={selectedLesson.materialUrl}
|
|
rel="noreferrer"
|
|
target="_blank"
|
|
>
|
|
Abrir material
|
|
</a>
|
|
)
|
|
) : null}
|
|
|
|
<div className="space-y-2 rounded-xl border border-slate-200 bg-white p-4">
|
|
<h1 className="text-2xl font-semibold text-slate-900">{selectedLesson.title}</h1>
|
|
<p className="inline-flex w-fit rounded-full border border-slate-300 bg-slate-50 px-2.5 py-0.5 text-xs font-semibold text-slate-700">
|
|
{selectedLessonTypeLabel}
|
|
</p>
|
|
{selectedLesson.description ? (
|
|
<p className="text-sm text-slate-600">{selectedLesson.description}</p>
|
|
) : null}
|
|
<p className="text-xs text-slate-500">
|
|
Duration: {Math.max(1, Math.ceil(selectedLesson.estimatedDuration / 60))} min
|
|
</p>
|
|
</div>
|
|
|
|
{isEnrolled && !isAssessmentType(selectedLesson.contentType) && (
|
|
<button
|
|
type="button"
|
|
onClick={() => void handleToggleComplete()}
|
|
disabled={isSaving}
|
|
className="rounded-md border border-slate-300 bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 disabled:opacity-60"
|
|
>
|
|
{completedSet.has(selectedLesson.id) ? "Marcar como pendiente" : "Marcar como completada"}
|
|
</button>
|
|
)}
|
|
</section>
|
|
|
|
<aside className="rounded-xl border border-slate-200 bg-white p-4">
|
|
<h2 className="mb-3 text-lg font-semibold text-slate-900">Contenido del curso</h2>
|
|
<p className="mb-3 text-xs text-slate-500">{courseTitle}</p>
|
|
<div className="mb-4">
|
|
<ProgressBar value={progressPercent} label={`${completedCount}/${totalLessons} lecciones (${progressPercent}%)`} />
|
|
</div>
|
|
|
|
<div className="max-h-[70vh] space-y-4 overflow-y-auto pr-1">
|
|
{modules.map((module, moduleIndex) => (
|
|
<div key={module.id} className="rounded-xl border border-slate-200 bg-slate-50/40">
|
|
<div className="border-b border-slate-200 px-3 py-2">
|
|
<p className="text-sm font-semibold text-slate-800">
|
|
Módulo {moduleIndex + 1}: {module.title}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-1 p-2">
|
|
{module.lessons.map((lesson, lessonIndex) => {
|
|
const completed = completedSet.has(lesson.id);
|
|
const restricted = isRestricted(lesson.id);
|
|
const locked = isLockedForUser(lesson);
|
|
const active = lesson.id === selectedLesson.id;
|
|
|
|
return (
|
|
<button
|
|
key={lesson.id}
|
|
type="button"
|
|
disabled={restricted}
|
|
onClick={() => navigateToLesson(lesson.id)}
|
|
className={`flex w-full items-center gap-2 rounded-lg border px-2 py-2 text-left text-sm transition-colors ${
|
|
active
|
|
? "border-slate-300 bg-white text-slate-900"
|
|
: "border-transparent bg-white/70 text-slate-700 hover:border-slate-200"
|
|
} ${restricted ? "cursor-not-allowed opacity-60 hover:border-transparent" : ""}`}
|
|
>
|
|
<span className="inline-flex h-5 w-5 shrink-0 items-center justify-center">
|
|
{completed ? (
|
|
<Check className="h-4 w-4 text-emerald-600" />
|
|
) : restricted || locked ? (
|
|
<Lock className="h-4 w-4 text-slate-400" />
|
|
) : lesson.contentType === "LECTURE" ? (
|
|
<FileText className="h-4 w-4 text-slate-500" />
|
|
) : lesson.contentType === "ACTIVITY" ? (
|
|
<CircleDashed className="h-4 w-4 text-slate-500" />
|
|
) : lesson.contentType === "QUIZ" || lesson.contentType === "FINAL_EXAM" ? (
|
|
<ClipboardCheck className="h-4 w-4 text-slate-500" />
|
|
) : (
|
|
<PlayCircle className="h-4 w-4 text-slate-500" />
|
|
)}
|
|
</span>
|
|
<span className="min-w-0 flex-1 line-clamp-1">
|
|
{lessonIndex + 1}. {lesson.title}
|
|
<span className="ml-1.5 inline rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-700">
|
|
{getLessonContentTypeLabel(lesson.contentType)}
|
|
</span>
|
|
{lesson.isFreePreview && (
|
|
<span className="ml-1.5 inline rounded bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-800">
|
|
Vista previa
|
|
</span>
|
|
)}
|
|
{isFinalExam(lesson.contentType) && (
|
|
<span className="ml-1.5 inline rounded bg-amber-100 px-1.5 py-0.5 text-xs font-medium text-amber-800">
|
|
Obligatoria
|
|
</span>
|
|
)}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
);
|
|
}
|