Create frontend/src/components/learning-paths/ModuleList.tsx

frontend/src/components/learning-paths/ModuleList.tsx

@@ -0,0 +1,46 @@
+// 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;