Spaces:
Build error
Build error
File size: 2,512 Bytes
5870478 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
// src/components/learning-paths/ProgressTracker.tsx
import React from 'react';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { useUser } from '../../contexts/UserContext';
import { useLearning } from '../../contexts/LearningContext';
const ProgressTracker = () => {
const { user } = useUser();
const { paths } = useLearning();
const totalModules = paths.reduce((acc, path) =>
acc + path.modules.length, 0
);
const completedModules = user.progress.completedModules.length;
const overallProgress = (completedModules / totalModules) * 100;
return (
<Card>
<CardHeader>
<CardTitle>Learning Progress</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-6">
<div>
<div className="flex justify-between text-sm text-gray-600 mb-2">
<span>Overall Progress</span>
<span>{Math.round(overallProgress)}%</span>
</div>
<Progress value={overallProgress} className="h-2" />
</div>
<div className="grid grid-cols-2 gap-4">
<div className="bg-blue-50 p-4 rounded">
<div className="text-2xl font-bold text-blue-600">
{completedModules}
</div>
<div className="text-sm text-gray-600">Modules Completed</div>
</div>
<div className="bg-green-50 p-4 rounded">
<div className="text-2xl font-bold text-green-600">
{user.progress.learningStreak}
</div>
<div className="text-sm text-gray-600">Day Streak</div>
</div>
</div>
{user.progress.achievements.length > 0 && (
<div>
<h3 className="font-semibold mb-2">Recent Achievements</h3>
<div className="space-y-2">
{user.progress.achievements.slice(-3).map((achievement, idx) => (
<div key={idx} className="flex items-center gap-2 text-sm">
<span>🏆</span>
<span>{achievement.name}</span>
<span className="text-gray-500">
{new Date(achievement.date).toLocaleDateString()}
</span>
</div>
))}
</div>
</div>
)}
</div>
</CardContent>
</Card>
);
};
export default ProgressTracker;
|