sidney
/
microtecflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adicionado botões de navegação Aula Anterior e Próxima Aula
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 59s Details

This commit is contained in:
Sidney Gomes 2026-07-25 11:42:40 -03:00
parent c616362e0f
commit fd8b7f6d36
1 changed files with 39 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/CourseView.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { ArrowLeft, BookOpen, ChevronRight, FileText, CheckCircle2, Circle, MessageSquare, AlertCircle, Award, Download } from 'lucide-react';
import { ArrowLeft, BookOpen, ChevronRight, ChevronLeft, FileText, CheckCircle2, Circle, MessageSquare, AlertCircle, Award, Download } from 'lucide-react';
import VideoPlayer from './VideoPlayer';
import CourseActivity from './CourseActivity';
@ -297,6 +297,13 @@ export default function CourseView({ courseId, token, onBack, initialLessonId }:
);
}
// Derived state for prev/next lesson
const allLessons = modules.flatMap(m => m.lessons);
const activeLessonIndex = activeLesson ? allLessons.findIndex(l => l.id === activeLesson.id) : -1;
const prevLesson = activeLessonIndex > 0 ? allLessons[activeLessonIndex - 1] : null;
const nextLesson = activeLessonIndex >= 0 && activeLessonIndex < allLessons.length - 1 ? allLessons[activeLessonIndex + 1] : null;
const isCurrentLessonCompleted = activeLesson?.progress?.completed;
return (
<div className="space-y-6">
{/* Back Header */}
@ -332,6 +339,37 @@ export default function CourseView({ courseId, token, onBack, initialLessonId }:
onReact={handleReact}
/>
{/* Navigation Buttons */}
<div className="flex justify-between items-center gap-4 py-2">
<button
onClick={() => prevLesson && setActiveLesson(prevLesson)}
disabled={!prevLesson}
className={`flex-1 sm:flex-none flex items-center justify-center space-x-2 px-4 py-2.5 rounded-lg font-bold transition-all ${
prevLesson
? 'bg-zinc-800/50 hover:bg-zinc-800 text-white cursor-pointer'
: 'bg-zinc-800/20 text-zinc-600 cursor-not-allowed opacity-50'
}`}
>
<ChevronLeft className="w-5 h-5" />
<span>Aula Anterior</span>
</button>
<button
onClick={() => nextLesson && setActiveLesson(nextLesson)}
disabled={!nextLesson}
className={`flex-1 sm:flex-none flex items-center justify-center space-x-2 px-6 py-2.5 rounded-lg font-bold transition-all ${
!nextLesson
? 'bg-zinc-800/20 text-zinc-600 cursor-not-allowed opacity-50'
: isCurrentLessonCompleted
? 'bg-[#E50914] hover:bg-[#b80710] text-white animate-pulse shadow-[0_0_15px_rgba(229,9,20,0.5)] cursor-pointer'
: 'bg-white text-black hover:bg-zinc-200 cursor-pointer'
}`}
>
<span>Próxima Aula</span>
<ChevronRight className="w-5 h-5" />
</button>
</div>
{/* Lesson Description Content */}
{activeLesson.content && (
<div className="glass-card p-5 rounded-xl space-y-2">