Create learning-paths/PathCard.tsx

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

@@ -0,0 +1,44 @@
+// src/components/learning-paths/PathCard.tsx
+import React from 'react';
+import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { useLearning } from '../../contexts/LearningContext';
+import { useUser } from '../../contexts/UserContext';
+
+const PathCard = ({ path }) => {
+  const { setCurrentPath } = useLearning();
+  const { user } = useUser();
+
+  const completedModules = path.modules.filter(module => 
+    user.progress.completedModules.includes(module.id)
+  ).length;
+
+  const progress = (completedModules / path.modules.length) * 100;
+
+  return (
+    <Card className="hover:shadow-lg transition-shadow duration-300">
+      <CardHeader>
+        <CardTitle>{path.name}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p className="text-gray-600 mb-4">{path.description}</p>
+        <div className="space-y-4">
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>{completedModules} / {path.modules.length} modules</span>
+            <span>{Math.round(progress)}% complete</span>
+          </div>
+          <Progress value={progress} className="h-2" />
+          <button
+            onClick={() => setCurrentPath(path.id)}
+            className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 
+                     transition-colors duration-300"
+          >
+            Continue Learning
+          </button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PathCard;