72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
|
/**
|
||
|
|
* CourseLearningView — player stage (video / quiz / article).
|
||
|
|
*/
|
||
|
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { PlayCircle, HelpCircle } from 'lucide-react';
|
||
|
|
|
||
|
|
interface Lesson {
|
||
|
|
id: string;
|
||
|
|
title: string;
|
||
|
|
duration: string;
|
||
|
|
type: 'video' | 'article' | 'quiz';
|
||
|
|
content?: string;
|
||
|
|
quizId?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface CourseLearningViewPlayerProps {
|
||
|
|
lesson: Lesson | null;
|
||
|
|
onStartQuiz: (quizId: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CourseLearningViewPlayer({
|
||
|
|
lesson,
|
||
|
|
onStartQuiz,
|
||
|
|
}: CourseLearningViewPlayerProps) {
|
||
|
|
if (!lesson) {
|
||
|
|
return (
|
||
|
|
<div className="bg-black aspect-video w-full flex items-center justify-center">
|
||
|
|
<p className="text-kodo-content-dim">Select a lesson</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (lesson.type === 'video') {
|
||
|
|
return (
|
||
|
|
<div className="bg-black aspect-video w-full flex items-center justify-center relative">
|
||
|
|
<div className="text-center">
|
||
|
|
<PlayCircle className="w-16 h-16 text-white opacity-50 mx-auto mb-4" />
|
||
|
|
<p className="text-kodo-content-dim">Video Player Placeholder</p>
|
||
|
|
<p className="text-xs text-kodo-content-dim mt-2">{lesson.title}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (lesson.type === 'quiz') {
|
||
|
|
return (
|
||
|
|
<div className="bg-black aspect-video w-full flex items-center justify-center relative">
|
||
|
|
<div className="text-center">
|
||
|
|
<HelpCircle className="w-16 h-16 text-kodo-gold mx-auto mb-4" />
|
||
|
|
<h3 className="text-white text-xl font-bold mb-4">Quiz: {lesson.title}</h3>
|
||
|
|
<Button
|
||
|
|
variant="primary"
|
||
|
|
onClick={() => lesson.quizId && onStartQuiz(lesson.quizId)}
|
||
|
|
>
|
||
|
|
Start Quiz
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-8 max-w-2xl mx-auto text-left w-full h-full overflow-y-auto bg-kodo-graphite">
|
||
|
|
<h2 className="text-2xl font-bold text-white mb-4">{lesson.title}</h2>
|
||
|
|
<p className="text-kodo-text-main leading-relaxed">
|
||
|
|
{lesson.content ??
|
||
|
|
'This is a text-based lesson. Content would be rendered here in Markdown.'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|