mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 11:25:49 +00:00
feat: unify real activity tracking, admin monitoring, and error UX
This commit is contained in:
Stalin
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useRouter, useParams } from "next/navigation"
|
||||
import { Loader2, Play, Clock, BookOpen, ChevronDown, ChevronRight, User, Users, Star, Award, TrendingUp, CheckCircle, ArrowRight } from "lucide-react"
|
||||
import { Loader2, Play, Clock, BookOpen, ChevronDown, ChevronRight, User, Users, Star, CheckCircle } from "lucide-react"
|
||||
import { toast } from "react-hot-toast"
|
||||
import api from "@/lib/api"
|
||||
import { useAuth } from "@/context/auth-context"
|
||||
@@ -44,7 +44,7 @@ type Lesson = {
|
||||
}
|
||||
|
||||
export default function CoursePage() {
|
||||
const { user, firebaseUser, isLoading: authLoading } = useAuth()
|
||||
const { user, isLoading: authLoading } = useAuth()
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const courseId = params?.courseId as string
|
||||
@@ -56,42 +56,49 @@ export default function CoursePage() {
|
||||
const [modulesLoading, setModulesLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Navigation state
|
||||
const [selectedModuleId, setSelectedModuleId] = useState<string | null>(null)
|
||||
const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null)
|
||||
const [expandedModules, setExpandedModules] = useState<{ [moduleId: string]: boolean }>({})
|
||||
const [completed, setCompleted] = useState(false)
|
||||
|
||||
// Certificate Modal State
|
||||
const [showCertificateModal, setShowCertificateModal] = useState(false)
|
||||
|
||||
const logCourseActivity = async (action: "view" | "start" | "lesson_view", lessonId?: string) => {
|
||||
try {
|
||||
const token = localStorage.getItem("openlearnx_jwt_token")
|
||||
await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/activity`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ action, lesson_id: lessonId }),
|
||||
})
|
||||
} catch {
|
||||
// Activity logging should not block course UX.
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !user && !firebaseUser) {
|
||||
if (!authLoading && !user) {
|
||||
toast.error("Please login to view courses.")
|
||||
router.replace("/")
|
||||
return
|
||||
}
|
||||
if ((user || firebaseUser) && courseId) {
|
||||
if (user && courseId) {
|
||||
fetchCourseData()
|
||||
}
|
||||
}, [authLoading, user, firebaseUser, courseId, router])
|
||||
}, [authLoading, user, courseId, router])
|
||||
|
||||
const fetchCourseData = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
console.log('🔍 Starting to fetch course data for:', courseId)
|
||||
|
||||
const courseResponse = await api.get<Course>(`/api/courses/${courseId}?t=${Date.now()}`)
|
||||
const courseData = courseResponse.data
|
||||
console.log('✅ Course data loaded:', courseData)
|
||||
setCourse(courseData)
|
||||
|
||||
try {
|
||||
const courseResponse = await api.get<Course>(`/api/courses/${courseId}?t=${Date.now()}`)
|
||||
setCourse(courseResponse.data)
|
||||
logCourseActivity("view")
|
||||
await fetchModulesAndLessons(courseId)
|
||||
|
||||
} catch (err: any) {
|
||||
console.error('❌ Error fetching course data:', err)
|
||||
setError(err.message || "Failed to load course data.")
|
||||
toast.error("Failed to load course data.")
|
||||
} finally {
|
||||
@@ -99,60 +106,37 @@ export default function CoursePage() {
|
||||
}
|
||||
}
|
||||
|
||||
const fetchModulesAndLessons = async (courseId: string) => {
|
||||
const fetchModulesAndLessons = async (id: string) => {
|
||||
setModulesLoading(true)
|
||||
|
||||
|
||||
try {
|
||||
console.log('🔍 Fetching modules for course:', courseId)
|
||||
|
||||
let modulesData = null
|
||||
let modulesResponse = null
|
||||
|
||||
// Use public endpoint for course page (not admin endpoint)
|
||||
try {
|
||||
modulesResponse = await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/modules`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
|
||||
if (modulesResponse.ok) {
|
||||
modulesData = await modulesResponse.json()
|
||||
console.log('✅ Modules loaded from public endpoint:', modulesData)
|
||||
}
|
||||
} catch (publicError) {
|
||||
console.error('❌ Module endpoint failed')
|
||||
}
|
||||
|
||||
if (modulesData) {
|
||||
let modulesList: Module[] = []
|
||||
|
||||
if (modulesData.success && modulesData.modules && Array.isArray(modulesData.modules)) {
|
||||
modulesList = modulesData.modules
|
||||
} else if (modulesData.modules && Array.isArray(modulesData.modules)) {
|
||||
modulesList = modulesData.modules
|
||||
} else if (Array.isArray(modulesData)) {
|
||||
modulesList = modulesData
|
||||
} else if (modulesData.data && Array.isArray(modulesData.data)) {
|
||||
modulesList = modulesData.data
|
||||
}
|
||||
|
||||
modulesList = modulesList.sort((a, b) => a.order - b.order)
|
||||
|
||||
console.log('🔍 Processed modules list:', modulesList)
|
||||
setModules(modulesList)
|
||||
|
||||
if (modulesList.length > 0) {
|
||||
await fetchLessonsForAllModules(modulesList)
|
||||
}
|
||||
} else {
|
||||
console.log('⚠️ No modules data received')
|
||||
const modulesResponse = await fetch(`http://127.0.0.1:5000/api/courses/${id}/modules`, {
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
|
||||
if (!modulesResponse.ok) {
|
||||
setModules([])
|
||||
setLessons({})
|
||||
return
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Error in fetchModulesAndLessons:', error)
|
||||
|
||||
const modulesData = await modulesResponse.json()
|
||||
let modulesList: Module[] = []
|
||||
|
||||
if (modulesData.success && Array.isArray(modulesData.modules)) modulesList = modulesData.modules
|
||||
else if (Array.isArray(modulesData.modules)) modulesList = modulesData.modules
|
||||
else if (Array.isArray(modulesData)) modulesList = modulesData
|
||||
else if (Array.isArray(modulesData.data)) modulesList = modulesData.data
|
||||
|
||||
modulesList = modulesList.sort((a, b) => a.order - b.order)
|
||||
setModules(modulesList)
|
||||
|
||||
if (modulesList.length > 0) {
|
||||
await fetchLessonsForAllModules(modulesList)
|
||||
} else {
|
||||
setLessons({})
|
||||
}
|
||||
} catch {
|
||||
setModules([])
|
||||
setLessons({})
|
||||
} finally {
|
||||
@@ -163,112 +147,84 @@ export default function CoursePage() {
|
||||
const fetchLessonsForAllModules = async (modulesList: Module[]) => {
|
||||
const lessonsData: { [moduleId: string]: Lesson[] } = {}
|
||||
const expandedState: { [moduleId: string]: boolean } = {}
|
||||
|
||||
|
||||
for (const module of modulesList) {
|
||||
try {
|
||||
console.log('🔍 Fetching lessons for module:', module.id)
|
||||
|
||||
// Use public endpoint for course page (not admin endpoint)
|
||||
const lessonsResponse = await fetch(`http://127.0.0.1:5000/api/modules/${module.id}/lessons`, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
headers: { "Content-Type": "application/json" },
|
||||
})
|
||||
|
||||
if (lessonsResponse.ok) {
|
||||
const lessonData = await lessonsResponse.json()
|
||||
console.log(`✅ Lessons loaded for module ${module.id}:`, lessonData)
|
||||
|
||||
let lessonsList: Lesson[] = []
|
||||
if (lessonData.success && lessonData.lessons && Array.isArray(lessonData.lessons)) {
|
||||
lessonsList = lessonData.lessons
|
||||
} else if (lessonData.lessons && Array.isArray(lessonData.lessons)) {
|
||||
lessonsList = lessonData.lessons
|
||||
} else if (Array.isArray(lessonData)) {
|
||||
lessonsList = lessonData
|
||||
} else if (lessonData.data && Array.isArray(lessonData.data)) {
|
||||
lessonsList = lessonData.data
|
||||
}
|
||||
|
||||
lessonsList = lessonsList.sort((a, b) => a.order - b.order)
|
||||
lessonsData[module.id] = lessonsList
|
||||
|
||||
if (!selectedModuleId && lessonsList.length > 0) {
|
||||
expandedState[module.id] = true
|
||||
}
|
||||
} else {
|
||||
console.log(`⚠️ No lessons found for module ${module.id}`)
|
||||
|
||||
if (!lessonsResponse.ok) {
|
||||
lessonsData[module.id] = []
|
||||
continue
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ Error fetching lessons for module ${module.id}:`, error)
|
||||
|
||||
const lessonData = await lessonsResponse.json()
|
||||
let lessonsList: Lesson[] = []
|
||||
|
||||
if (lessonData.success && Array.isArray(lessonData.lessons)) lessonsList = lessonData.lessons
|
||||
else if (Array.isArray(lessonData.lessons)) lessonsList = lessonData.lessons
|
||||
else if (Array.isArray(lessonData)) lessonsList = lessonData
|
||||
else if (Array.isArray(lessonData.data)) lessonsList = lessonData.data
|
||||
|
||||
lessonsData[module.id] = lessonsList.sort((a, b) => a.order - b.order)
|
||||
if (!selectedModuleId && lessonsData[module.id].length > 0) expandedState[module.id] = true
|
||||
} catch {
|
||||
lessonsData[module.id] = []
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setLessons(lessonsData)
|
||||
setExpandedModules(expandedState)
|
||||
|
||||
|
||||
if (!selectedModuleId && modulesList.length > 0) {
|
||||
const firstModule = modulesList[0]
|
||||
const firstModuleLessons = lessonsData[firstModule.id] || []
|
||||
|
||||
setSelectedModuleId(firstModule.id)
|
||||
if (firstModuleLessons.length > 0) {
|
||||
setSelectedLessonId(firstModuleLessons[0].id)
|
||||
}
|
||||
if (firstModuleLessons.length > 0) setSelectedLessonId(firstModuleLessons[0].id)
|
||||
}
|
||||
}
|
||||
|
||||
function getEmbedUrl(url?: string): string | undefined {
|
||||
const getEmbedUrl = (url?: string): string | undefined => {
|
||||
if (!url) return undefined
|
||||
const regExp = /(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/))([^#&?]{11})/
|
||||
const match = url.match(regExp)
|
||||
if (match && match[1]) {
|
||||
return `https://www.youtube.com/embed/${match[1]}?rel=0&modestbranding=1`
|
||||
}
|
||||
if (match && match[1]) return `https://www.youtube.com/embed/${match[1]}?rel=0&modestbranding=1`
|
||||
return url
|
||||
}
|
||||
|
||||
const toggleModule = (moduleId: string) => {
|
||||
setExpandedModules(prev => ({
|
||||
...prev,
|
||||
[moduleId]: !prev[moduleId]
|
||||
}))
|
||||
setExpandedModules((prev) => ({ ...prev, [moduleId]: !prev[moduleId] }))
|
||||
}
|
||||
|
||||
const selectLesson = (moduleId: string, lessonId: string) => {
|
||||
setSelectedModuleId(moduleId)
|
||||
setSelectedLessonId(lessonId)
|
||||
setExpandedModules(prev => ({
|
||||
...prev,
|
||||
[moduleId]: true
|
||||
}))
|
||||
setExpandedModules((prev) => ({ ...prev, [moduleId]: true }))
|
||||
logCourseActivity("lesson_view", lessonId)
|
||||
}
|
||||
|
||||
const getCurrentLesson = (): Lesson | null => {
|
||||
if (!selectedModuleId || !selectedLessonId) return null
|
||||
const moduleLessons = lessons[selectedModuleId] || []
|
||||
return moduleLessons.find(lesson => lesson.id === selectedLessonId) || null
|
||||
return (lessons[selectedModuleId] || []).find((lesson) => lesson.id === selectedLessonId) || null
|
||||
}
|
||||
|
||||
const getAllLessons = (): Lesson[] => {
|
||||
const allLessons: Lesson[] = []
|
||||
modules.forEach(module => {
|
||||
const moduleLessons = lessons[module.id] || []
|
||||
allLessons.push(...moduleLessons)
|
||||
const all: Lesson[] = []
|
||||
modules.forEach((module) => {
|
||||
all.push(...(lessons[module.id] || []))
|
||||
})
|
||||
return allLessons
|
||||
return all
|
||||
}
|
||||
|
||||
const navigateLesson = (direction: 'prev' | 'next') => {
|
||||
const navigateLesson = (direction: "prev" | "next") => {
|
||||
const allLessons = getAllLessons()
|
||||
const currentIndex = allLessons.findIndex(lesson => lesson.id === selectedLessonId)
|
||||
|
||||
if (direction === 'prev' && currentIndex > 0) {
|
||||
const currentIndex = allLessons.findIndex((lesson) => lesson.id === selectedLessonId)
|
||||
|
||||
if (direction === "prev" && currentIndex > 0) {
|
||||
const prevLesson = allLessons[currentIndex - 1]
|
||||
selectLesson(prevLesson.module_id, prevLesson.id)
|
||||
} else if (direction === 'next' && currentIndex < allLessons.length - 1) {
|
||||
} else if (direction === "next" && currentIndex < allLessons.length - 1) {
|
||||
const nextLesson = allLessons[currentIndex + 1]
|
||||
selectLesson(nextLesson.module_id, nextLesson.id)
|
||||
}
|
||||
@@ -284,37 +240,35 @@ export default function CoursePage() {
|
||||
return allLessons.length > 0 && allLessons[allLessons.length - 1].id === selectedLessonId
|
||||
}
|
||||
|
||||
const markComplete = () => {
|
||||
const markComplete = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("openlearnx_jwt_token")
|
||||
if (selectedLessonId) {
|
||||
await fetch(`http://127.0.0.1:5000/api/courses/${courseId}/lessons/${selectedLessonId}/complete`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
})
|
||||
}
|
||||
} catch {
|
||||
// Keep UX smooth even if completion log write fails.
|
||||
}
|
||||
setCompleted(true)
|
||||
setShowCertificateModal(true)
|
||||
}
|
||||
|
||||
const getTotalLessons = () => {
|
||||
return Object.values(lessons).reduce((total, moduleLessons) => total + moduleLessons.length, 0)
|
||||
}
|
||||
const getTotalLessons = () => Object.values(lessons).reduce((total, moduleLessons) => total + moduleLessons.length, 0)
|
||||
|
||||
const currentLesson = getCurrentLesson()
|
||||
|
||||
if (authLoading || loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 flex items-center justify-center relative overflow-hidden">
|
||||
{/* Animated background elements */}
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
|
||||
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-1000"></div>
|
||||
<div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"></div>
|
||||
</div>
|
||||
<div className="text-center z-10">
|
||||
<div className="relative">
|
||||
<Loader2 className="h-16 w-16 animate-spin text-white mx-auto mb-6 drop-shadow-lg" />
|
||||
<div className="absolute inset-0 h-16 w-16 border-4 border-transparent border-t-purple-400 rounded-full animate-ping mx-auto"></div>
|
||||
</div>
|
||||
<p className="text-xl text-white font-semibold tracking-wide animate-pulse">Loading your learning journey...</p>
|
||||
<div className="mt-4 flex justify-center space-x-1">
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce"></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce animation-delay-200"></div>
|
||||
<div className="w-2 h-2 bg-white rounded-full animate-bounce animation-delay-400"></div>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<div className="text-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-600 mx-auto mb-3" />
|
||||
<p className="text-gray-700 dark:text-gray-300">Loading course...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -322,21 +276,16 @@ export default function CoursePage() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-red-900 via-pink-900 to-purple-900 flex items-center justify-center p-4">
|
||||
<div className="text-center max-w-md mx-auto px-6">
|
||||
<div className="bg-white/10 backdrop-blur-lg border border-red-300/30 rounded-3xl p-10 shadow-2xl animate-bounce">
|
||||
<div className="w-20 h-20 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse">
|
||||
<span className="text-3xl">⚠️</span>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-white mb-4">Oops! Something went wrong</h2>
|
||||
<p className="text-red-200 mb-8 leading-relaxed">{error}</p>
|
||||
<button
|
||||
onClick={fetchCourseData}
|
||||
className="px-8 py-4 bg-gradient-to-r from-red-500 to-pink-500 text-white rounded-2xl hover:from-red-600 hover:to-pink-600 shadow-lg transition-all duration-300 transform hover:scale-105 font-semibold text-lg"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="w-full max-w-md rounded-xl border border-red-200 bg-white dark:bg-gray-800 p-6 text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">Unable to load course</h2>
|
||||
<p className="mt-2 text-sm text-red-600 dark:text-red-300">{error}</p>
|
||||
<button
|
||||
onClick={fetchCourseData}
|
||||
className="mt-4 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -344,214 +293,115 @@ export default function CoursePage() {
|
||||
|
||||
if (!course) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center p-4">
|
||||
<div className="text-center max-w-sm bg-white/10 backdrop-blur-lg rounded-3xl shadow-2xl p-10 animate-fadeIn">
|
||||
<div className="w-24 h-24 bg-gray-500 rounded-full flex items-center justify-center mx-auto mb-6 animate-bounce">
|
||||
<span className="text-4xl">🔍</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-white mb-4">Course Not Found</h2>
|
||||
<p className="text-gray-300 leading-relaxed">The course you're looking for doesn't exist or may have been removed.</p>
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4">
|
||||
<div className="w-full max-w-md rounded-xl border border-gray-200 bg-white dark:bg-gray-800 p-6 text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">Course not found</h2>
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">This course is unavailable or was removed.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
|
||||
{/* Animated Background Elements */}
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute -top-40 -right-40 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float"></div>
|
||||
<div className="absolute -bottom-40 -left-40 w-96 h-96 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float animation-delay-2000"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-white/80 backdrop-blur-lg shadow-xl border-b border-purple-200 sticky top-0 z-50">
|
||||
<div className="w-full px-6 sm:px-10 lg:px-16 xl:px-20">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
<div className="flex items-center space-x-6 animate-slideInLeft">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg transform hover:scale-110 transition-transform duration-300">
|
||||
<span className="text-white font-extrabold text-2xl">OL</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent tracking-tight">{course.title}</h1>
|
||||
<p className="text-sm text-purple-700 font-semibold tracking-wide">by {course.mentor}</p>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<header className="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
|
||||
<div className="w-full px-6 sm:px-8 lg:px-12 py-5 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white">{course.title}</h1>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">by {course.mentor}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1.5">
|
||||
<BookOpen className="w-4 h-4" />
|
||||
<span>{modules.length} modules</span>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center space-x-8 text-sm text-purple-700 animate-slideInRight">
|
||||
<div className="flex items-center space-x-2 bg-purple-100 px-4 py-2 rounded-full">
|
||||
<BookOpen className="w-5 h-5 text-purple-600" />
|
||||
<span className="font-semibold">{modules.length} modules</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 bg-indigo-100 px-4 py-2 rounded-full">
|
||||
<Play className="w-5 h-5 text-indigo-600" />
|
||||
<span className="font-semibold">{getTotalLessons()} lessons</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 bg-pink-100 px-4 py-2 rounded-full">
|
||||
<Users className="w-5 h-5 text-pink-600" />
|
||||
<span className="font-semibold">{course.students.toLocaleString()} students</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1.5">
|
||||
<Play className="w-4 h-4" />
|
||||
<span>{getTotalLessons()} lessons</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1.5">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>{course.students.toLocaleString()} students</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="w-full px-6 sm:px-10 lg:px-16 xl:px-20 py-12 grid grid-cols-1 lg:grid-cols-5 gap-12 relative z-10">
|
||||
|
||||
{/* Sidebar - Now takes up 2 columns on large screens */}
|
||||
<aside className="lg:col-span-2 animate-slideInLeft">
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl border border-purple-200 p-10 sticky top-28">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<h2 className="text-2xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">Course Content</h2>
|
||||
<div className="w-8 h-8 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center">
|
||||
<BookOpen className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
<main className="w-full px-6 sm:px-8 lg:px-12 py-6 grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||||
<aside className="lg:col-span-2">
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 sticky top-4">
|
||||
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Course Content</h2>
|
||||
|
||||
{/* Enhanced Progress Bar */}
|
||||
<div className="mb-8 p-4 bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl border border-purple-200">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-semibold text-purple-700">Progress</span>
|
||||
<span className="text-sm font-bold text-indigo-600">25%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-purple-500 to-indigo-500 h-3 rounded-full transition-all duration-1000 ease-out animate-pulse" style={{width: '25%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Debug Info - Enhanced */}
|
||||
<div className="mb-8 p-5 bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-2xl animate-fadeIn">
|
||||
<h3 className="text-sm font-bold text-blue-800 mb-4 flex items-center">
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
🔍 Debug Info:
|
||||
</h3>
|
||||
<div className="text-xs space-y-2 text-blue-700">
|
||||
<p><strong>Course ID:</strong> {courseId}</p>
|
||||
<p><strong>Modules Loaded:</strong> {modules.length}</p>
|
||||
<p><strong>Total Lessons:</strong> {getTotalLessons()}</p>
|
||||
<p><strong>Modules Loading:</strong> {modulesLoading ? 'Yes' : 'No'}</p>
|
||||
<p><strong>Selected Module:</strong> {selectedModuleId || 'None'}</p>
|
||||
<p><strong>Selected Lesson:</strong> {currentLesson?.title || 'None'}</p>
|
||||
<p><strong>Expanded Modules:</strong> {Object.keys(expandedModules).length}</p>
|
||||
</div>
|
||||
{modules.length > 0 && (
|
||||
<details className="mt-4 border-t border-blue-200 pt-4">
|
||||
<summary className="text-xs cursor-pointer text-blue-600 font-semibold hover:text-blue-800 transition-colors">Show Raw Data</summary>
|
||||
<pre className="mt-3 text-xs p-4 bg-white rounded-xl shadow max-h-40 overflow-auto">
|
||||
{JSON.stringify({ modules, lessons }, null, 2)}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loading State */}
|
||||
{modulesLoading && (
|
||||
<div className="text-center py-10 animate-pulse">
|
||||
<Loader2 className="h-12 w-12 animate-spin text-purple-500 mx-auto mb-4" />
|
||||
<p className="text-lg text-purple-700 font-semibold">Loading modules...</p>
|
||||
<div className="text-center py-8">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-blue-600 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300">Loading modules...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No Modules State */}
|
||||
{!modulesLoading && modules.length === 0 && (
|
||||
<div className="text-center py-8 animate-bounce">
|
||||
<div className="bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-300 rounded-2xl p-6 text-yellow-800">
|
||||
<div className="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">📚</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-3">No Modules Found</h3>
|
||||
<p className="text-sm mb-4 leading-relaxed">
|
||||
This could mean:<br />
|
||||
• No modules created yet<br />
|
||||
• API endpoint issues<br />
|
||||
• Course ID mismatch
|
||||
</p>
|
||||
<button
|
||||
onClick={() => fetchModulesAndLessons(courseId)}
|
||||
className="px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-2xl text-white font-bold hover:from-yellow-600 hover:to-orange-600 transition-all duration-300 transform hover:scale-105 shadow-lg"
|
||||
>
|
||||
Retry Loading Modules
|
||||
</button>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-5 text-center">
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-white">No content available yet</h3>
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
Lessons for this course have not been published.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => fetchModulesAndLessons(courseId)}
|
||||
className="mt-4 px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modules List */}
|
||||
{!modulesLoading && modules.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{modules.map((module, index) => (
|
||||
<div key={module.id} className="border border-purple-200 rounded-2xl overflow-hidden shadow-lg bg-white/60 backdrop-blur-sm hover:shadow-xl transition-all duration-300 animate-fadeInUp" style={{animationDelay: `${index * 100}ms`}}>
|
||||
{/* Module Header */}
|
||||
<div key={module.id} className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => toggleModule(module.id)}
|
||||
className={`w-full px-6 py-5 text-left hover:bg-gradient-to-r hover:from-purple-50 hover:to-indigo-50 flex items-center justify-between transition-all duration-300 ${
|
||||
selectedModuleId === module.id ? 'bg-gradient-to-r from-purple-100 to-indigo-100 border-purple-300' : 'bg-white/80'
|
||||
className={`w-full px-4 py-3 text-left flex items-center justify-between ${
|
||||
selectedModuleId === module.id ? "bg-blue-50 dark:bg-blue-900/20" : "bg-white dark:bg-gray-800"
|
||||
}`}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="flex-shrink-0 w-10 h-10 bg-gradient-to-r from-purple-500 to-indigo-500 text-white rounded-full flex items-center justify-center font-bold text-sm shadow-lg transform hover:scale-110 transition-transform duration-300">
|
||||
{index + 1}
|
||||
</span>
|
||||
<h3 className="font-bold text-purple-900 truncate text-lg">{module.title}</h3>
|
||||
</div>
|
||||
<p className="text-sm text-purple-600 mt-2 ml-14 flex items-center">
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
{(lessons[module.id]?.length ?? 0) + (lessons[module.id]?.length === 1 ? ' lesson' : ' lessons')}
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{index + 1}. {module.title}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{(lessons[module.id]?.length || 0)} lessons
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 ml-4">
|
||||
<div className={`transform transition-transform duration-300 ${expandedModules[module.id] ? 'rotate-180' : ''}`}>
|
||||
{expandedModules[module.id] ? (
|
||||
<ChevronDown className="w-6 h-6 text-purple-500" />
|
||||
) : (
|
||||
<ChevronRight className="w-6 h-6 text-purple-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{expandedModules[module.id] ? (
|
||||
<ChevronDown className="w-4 h-4 text-gray-500" />
|
||||
) : (
|
||||
<ChevronRight className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Lessons */}
|
||||
{expandedModules[module.id] && (
|
||||
<div className="bg-gradient-to-r from-purple-50 to-indigo-50 border-t border-purple-200 animate-slideDown">
|
||||
{lessons[module.id] && lessons[module.id].length > 0 ? (
|
||||
lessons[module.id].map((lesson, lessonIndex) => (
|
||||
<div className="border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50">
|
||||
{(lessons[module.id] || []).length > 0 ? (
|
||||
(lessons[module.id] || []).map((lesson) => (
|
||||
<button
|
||||
key={lesson.id}
|
||||
onClick={() => selectLesson(module.id, lesson.id)}
|
||||
className={`w-full px-8 py-4 text-left hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 transition-all duration-300 border-l-4 group ${
|
||||
className={`w-full px-4 py-3 text-left border-l-2 ${
|
||||
selectedLessonId === lesson.id
|
||||
? 'border-purple-500 bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-900 font-bold shadow-inner'
|
||||
: 'border-transparent text-purple-700 hover:border-purple-300'
|
||||
? "border-blue-600 bg-blue-50 dark:bg-blue-900/20"
|
||||
: "border-transparent hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs transition-all duration-300 group-hover:scale-110 ${
|
||||
selectedLessonId === lesson.id
|
||||
? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg'
|
||||
: 'bg-purple-200 text-purple-700 group-hover:bg-purple-300'
|
||||
}`}>
|
||||
<Play className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="truncate font-semibold">{lesson.title}</p>
|
||||
{lesson.duration && (
|
||||
<p className={`text-xs flex items-center mt-1 ${
|
||||
selectedLessonId === lesson.id ? 'text-purple-700 font-semibold' : 'text-purple-500'
|
||||
}`}>
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
{lesson.duration}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<ArrowRight className={`w-4 h-4 transition-all duration-300 ${
|
||||
selectedLessonId === lesson.id ? 'text-purple-600 transform scale-110' : 'text-transparent group-hover:text-purple-400'
|
||||
}`} />
|
||||
</div>
|
||||
<p className="text-sm text-gray-900 dark:text-white">{lesson.title}</p>
|
||||
{lesson.duration && (
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 inline-flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" /> {lesson.duration}
|
||||
</p>
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<p className="px-8 py-6 text-purple-600 text-sm italic text-center">No lessons in this module</p>
|
||||
<p className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">No lessons in this module.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -562,14 +412,12 @@ export default function CoursePage() {
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content - Now takes up 3 columns on large screens for full width */}
|
||||
<section className="lg:col-span-3 animate-slideInRight">
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl border border-purple-200 overflow-hidden">
|
||||
<section className="lg:col-span-3">
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 overflow-hidden">
|
||||
{currentLesson ? (
|
||||
<>
|
||||
{/* Video Player */}
|
||||
{(currentLesson.embed_url || currentLesson.video_url) && (
|
||||
<div className="aspect-video bg-black rounded-t-3xl overflow-hidden relative group">
|
||||
<div className="aspect-video bg-black">
|
||||
<iframe
|
||||
src={getEmbedUrl(currentLesson.embed_url || currentLesson.video_url)}
|
||||
title={currentLesson.title}
|
||||
@@ -577,155 +425,84 @@ export default function CoursePage() {
|
||||
className="w-full h-full"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lesson Content */}
|
||||
<div className="p-16">
|
||||
{/* Lesson Header */}
|
||||
<div className="mb-12 animate-fadeInUp">
|
||||
<div className="flex items-center text-purple-600 space-x-4 mb-6">
|
||||
<div className="flex items-center space-x-2 bg-purple-100 px-6 py-3 rounded-full">
|
||||
<User className="w-6 h-6" />
|
||||
<span className="font-bold text-lg">{course.mentor}</span>
|
||||
</div>
|
||||
<span className="text-purple-300">•</span>
|
||||
<span className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white px-6 py-3 rounded-full text-lg font-bold uppercase tracking-widest shadow-lg">
|
||||
{course.difficulty}
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-6xl font-extrabold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent leading-tight mb-6 drop-shadow-sm">{currentLesson.title}</h1>
|
||||
{currentLesson.duration && (
|
||||
<div className="flex items-center text-purple-600 space-x-3 text-xl font-semibold">
|
||||
<div className="flex items-center space-x-2 bg-purple-100 px-6 py-3 rounded-full">
|
||||
<Clock className="w-6 h-6" />
|
||||
<span>{currentLesson.duration}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-300 mb-4">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1">
|
||||
<User className="w-4 h-4" /> {course.mentor}
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-3 py-1 font-medium">
|
||||
{course.difficulty}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Lesson Description */}
|
||||
<h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-3">{currentLesson.title}</h2>
|
||||
|
||||
{currentLesson.description && (
|
||||
<section className="mb-16 animate-fadeInUp animation-delay-200">
|
||||
<h2 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-8 border-b-2 border-purple-200 pb-4">
|
||||
About this lesson
|
||||
</h2>
|
||||
<article className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-3xl p-10 text-purple-900 prose max-w-none shadow-inner border border-purple-200 text-lg leading-relaxed">
|
||||
{currentLesson.description}
|
||||
</article>
|
||||
</section>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">About this lesson</h3>
|
||||
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">{currentLesson.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lesson Content */}
|
||||
{currentLesson.content && (
|
||||
<section className="mb-16 animate-fadeInUp animation-delay-400">
|
||||
<h2 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent mb-8 border-b-2 border-purple-200 pb-4">
|
||||
Lesson Content
|
||||
</h2>
|
||||
<article className="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-3xl p-10 text-purple-900 prose max-w-none whitespace-pre-line shadow-inner border border-purple-200 text-lg leading-relaxed">
|
||||
<div className="mb-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Lesson notes</h3>
|
||||
<div className="rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-4 text-gray-800 dark:text-gray-200 whitespace-pre-line">
|
||||
{currentLesson.content}
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between items-center pt-12 border-t-2 border-purple-200 animate-fadeInUp animation-delay-600">
|
||||
<div className="pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between gap-3">
|
||||
<button
|
||||
onClick={() => navigateLesson('prev')}
|
||||
onClick={() => navigateLesson("prev")}
|
||||
disabled={isFirstLesson()}
|
||||
className="px-12 py-5 bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 rounded-3xl hover:from-gray-200 hover:to-gray-300 disabled:opacity-50 disabled:cursor-not-allowed font-bold transition-all duration-300 transform hover:scale-105 shadow-lg text-xl"
|
||||
className="px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 dark:bg-gray-700 dark:text-gray-100"
|
||||
>
|
||||
← Previous Lesson
|
||||
Previous
|
||||
</button>
|
||||
|
||||
{!isLastLesson() ? (
|
||||
<button
|
||||
onClick={() => navigateLesson('next')}
|
||||
className="px-12 py-5 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-3xl hover:from-purple-700 hover:to-indigo-700 font-bold transition-all duration-300 transform hover:scale-105 shadow-xl text-xl"
|
||||
onClick={() => navigateLesson("next")}
|
||||
className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
|
||||
>
|
||||
Next Lesson →
|
||||
Next
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={markComplete}
|
||||
disabled={completed}
|
||||
className={`px-12 py-5 rounded-3xl font-bold transition-all duration-300 transform hover:scale-105 shadow-xl text-xl ${
|
||||
completed
|
||||
? "bg-gradient-to-r from-green-500 to-emerald-500 text-white cursor-not-allowed shadow-inner"
|
||||
: "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700"
|
||||
}`}
|
||||
className={`px-4 py-2 rounded-lg text-white ${completed ? "bg-green-600" : "bg-blue-600 hover:bg-blue-700"}`}
|
||||
>
|
||||
{completed ? "✓ Course Completed" : "Mark as Complete"}
|
||||
{completed ? "Completed" : "Mark as complete"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Completion Message */}
|
||||
{completed && !showCertificateModal && (
|
||||
<div className="mt-16 bg-gradient-to-r from-green-50 to-emerald-50 border-2 border-green-300 rounded-3xl p-12 text-center shadow-2xl animate-bounce">
|
||||
<div className="text-green-700">
|
||||
<div className="text-8xl mb-8 animate-pulse">🎉</div>
|
||||
<h3 className="text-4xl font-extrabold mb-6 bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">Congratulations!</h3>
|
||||
<p className="mb-10 text-green-800 font-semibold text-2xl">
|
||||
You have successfully completed this course!
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setShowCertificateModal(true)}
|
||||
className="px-16 py-6 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-3xl hover:from-green-700 hover:to-emerald-700 transition-all duration-300 transform hover:scale-105 font-bold text-xl shadow-xl"
|
||||
>
|
||||
Get Your Certificate 🏆
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* Course Overview */
|
||||
<div className="p-20 text-center max-w-5xl mx-auto text-purple-900 animate-fadeIn">
|
||||
<h1 className="text-7xl font-extrabold mb-10 bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 bg-clip-text text-transparent drop-shadow-lg">{course.title}</h1>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-8 mb-16 text-purple-700 font-bold text-xl">
|
||||
<div className="flex items-center space-x-4 bg-purple-100 px-8 py-4 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300">
|
||||
<User className="w-8 h-8" />
|
||||
<span>by {course.mentor}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4 bg-yellow-100 px-8 py-4 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300">
|
||||
<Star className="w-8 h-8 text-yellow-500" />
|
||||
<span>4.8 Rating</span>
|
||||
</div>
|
||||
<span className="bg-gradient-to-r from-purple-500 to-indigo-500 text-white px-8 py-4 rounded-full text-xl uppercase font-extrabold tracking-widest shadow-lg transform hover:scale-105 transition-transform duration-300">
|
||||
<div className="p-8 text-center">
|
||||
<h2 className="text-3xl font-semibold text-gray-900 dark:text-white">{course.title}</h2>
|
||||
<div className="mt-4 flex flex-wrap justify-center gap-3 text-sm">
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1 text-gray-700 dark:text-gray-300">
|
||||
<User className="w-4 h-4" /> by {course.mentor}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 px-3 py-1 text-yellow-700 dark:text-yellow-300">
|
||||
<Star className="w-4 h-4" /> 4.8 rating
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/30 px-3 py-1 text-blue-700 dark:text-blue-300">
|
||||
{course.difficulty}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-3xl max-w-5xl mx-auto mb-16 leading-relaxed tracking-wide text-purple-800">{course.description}</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-16 mb-16">
|
||||
<div className="text-center transform hover:scale-110 transition-transform duration-300">
|
||||
<div className="w-32 h-32 bg-gradient-to-r from-purple-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
|
||||
<span className="text-5xl font-extrabold text-white">{modules.length}</span>
|
||||
</div>
|
||||
<div className="uppercase text-purple-700 font-bold tracking-wide text-xl">Modules</div>
|
||||
</div>
|
||||
<div className="text-center transform hover:scale-110 transition-transform duration-300">
|
||||
<div className="w-32 h-32 bg-gradient-to-r from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
|
||||
<span className="text-5xl font-extrabold text-white">{getTotalLessons()}</span>
|
||||
</div>
|
||||
<div className="uppercase text-purple-700 font-bold tracking-wide text-xl">Lessons</div>
|
||||
</div>
|
||||
<div className="text-center transform hover:scale-110 transition-transform duration-300">
|
||||
<div className="w-32 h-32 bg-gradient-to-r from-indigo-500 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl">
|
||||
<span className="text-5xl font-extrabold text-white">{course.students.toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="uppercase text-purple-700 font-bold tracking-wide text-xl">Students</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-6 text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">{course.description}</p>
|
||||
|
||||
{(course.embed_url || course.video_url) && (
|
||||
<div className="aspect-video rounded-3xl overflow-hidden shadow-2xl mx-auto max-w-6xl bg-black border-4 border-purple-600 mb-16 transform hover:scale-105 transition-transform duration-500">
|
||||
<div className="mt-8 aspect-video rounded-xl overflow-hidden border border-gray-200 dark:border-gray-600 bg-black max-w-4xl mx-auto">
|
||||
<iframe
|
||||
src={getEmbedUrl(course.embed_url || course.video_url)}
|
||||
title={course.title}
|
||||
@@ -741,23 +518,18 @@ export default function CoursePage() {
|
||||
onClick={() => {
|
||||
const firstModule = modules[0]
|
||||
const firstLessons = lessons[firstModule?.id] || []
|
||||
if (firstLessons.length > 0) {
|
||||
if (firstModule && firstLessons.length > 0) {
|
||||
logCourseActivity("start")
|
||||
selectLesson(firstModule.id, firstLessons[0].id)
|
||||
}
|
||||
}}
|
||||
className="mt-12 px-20 py-8 bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white rounded-3xl hover:from-purple-700 hover:via-pink-700 hover:to-indigo-700 font-extrabold text-3xl shadow-2xl transition-all duration-300 transform hover:scale-110 hover:shadow-purple-500/25"
|
||||
className="mt-8 px-6 py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700"
|
||||
>
|
||||
🚀 Start Learning Journey
|
||||
Start learning
|
||||
</button>
|
||||
) : (
|
||||
<div className="bg-gradient-to-r from-yellow-50 to-orange-50 border-2 border-yellow-300 rounded-3xl p-12 text-yellow-800 text-2xl font-bold max-w-lg mx-auto shadow-xl">
|
||||
<div className="w-24 h-24 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-8">
|
||||
<span className="text-4xl">🚧</span>
|
||||
</div>
|
||||
<h3 className="text-3xl mb-6">Coming Soon</h3>
|
||||
<p className="font-normal text-yellow-700 text-xl">
|
||||
Amazing lessons are being crafted for this course. Check back soon!
|
||||
</p>
|
||||
<div className="mt-8 rounded-lg border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 p-5 max-w-xl mx-auto">
|
||||
<p className="text-gray-700 dark:text-gray-300">Lessons are not published yet for this course.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -766,7 +538,6 @@ export default function CoursePage() {
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Certificate Modal */}
|
||||
{showCertificateModal && course && (
|
||||
<CertificateModal
|
||||
isOpen={showCertificateModal}
|
||||
@@ -774,49 +545,10 @@ export default function CoursePage() {
|
||||
courseTitle={course.title}
|
||||
courseMentor={course.mentor}
|
||||
courseId={course.id}
|
||||
userId={user?.uid || firebaseUser?.uid || 'anonymous'}
|
||||
walletId={user?.wallet || firebaseUser?.uid || 'no-wallet'}
|
||||
userId={user?.id || "anonymous"}
|
||||
walletId={user?.wallet_address || "no-wallet"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Custom CSS for animations */}
|
||||
<style jsx>{`
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes slideInLeft {
|
||||
from { opacity: 0; transform: translateX(-50px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@keyframes slideInRight {
|
||||
from { opacity: 0; transform: translateX(50px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@keyframes slideDown {
|
||||
from { opacity: 0; max-height: 0; }
|
||||
to { opacity: 1; max-height: 500px; }
|
||||
}
|
||||
.animate-float { animation: float 6s ease-in-out infinite; }
|
||||
.animate-fadeIn { animation: fadeIn 1s ease-out; }
|
||||
.animate-fadeInUp { animation: fadeInUp 0.8s ease-out; }
|
||||
.animate-slideInLeft { animation: slideInLeft 0.8s ease-out; }
|
||||
.animate-slideInRight { animation: slideInRight 0.8s ease-out; }
|
||||
.animate-slideDown { animation: slideDown 0.3s ease-out; }
|
||||
.animation-delay-200 { animation-delay: 0.2s; }
|
||||
.animation-delay-400 { animation-delay: 0.4s; }
|
||||
.animation-delay-600 { animation-delay: 0.6s; }
|
||||
.animation-delay-1000 { animation-delay: 1s; }
|
||||
.animation-delay-2000 { animation-delay: 2s; }
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user