Spaces:
Build error
Build error
| // src/components/learning-paths/ModuleList.tsx | |
| import React from 'react'; | |
| import { Card, CardContent } from '@/components/ui/card'; | |
| import { useUser } from '../../contexts/UserContext'; | |
| const ModuleList = ({ modules }) => { | |
| const { user, updateProgress } = useUser(); | |
| return ( | |
| <div className="space-y-4"> | |
| {modules.map((module) => { | |
| const isCompleted = user.progress.completedModules.includes(module.id); | |
| return ( | |
| <Card key={module.id} className="relative"> | |
| <CardContent className="p-4"> | |
| <div className="flex items-center gap-4"> | |
| <div className={`w-8 h-8 rounded-full flex items-center justify-center | |
| ${isCompleted ? 'bg-green-500' : 'bg-gray-200'}`}> | |
| {isCompleted ? '✓' : module.order} | |
| </div> | |
| <div className="flex-1"> | |
| <h3 className="font-semibold">{module.name}</h3> | |
| <p className="text-sm text-gray-600">{module.description}</p> | |
| </div> | |
| <button | |
| onClick={() => updateProgress(module.id)} | |
| disabled={isCompleted} | |
| className={`px-4 py-2 rounded ${ | |
| isCompleted | |
| ? 'bg-gray-200 text-gray-600' | |
| : 'bg-blue-500 text-white hover:bg-blue-600' | |
| }`} | |
| > | |
| {isCompleted ? 'Completed' : 'Start'} | |
| </button> | |
| </div> | |
| </CardContent> | |
| </Card> | |
| ); | |
| })} | |
| </div> | |
| ); | |
| }; | |
| export default ModuleList; | |