info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 14:22:41 +02:00
Code Issues Releases Wiki Activity

User progress component

Browse Source
This commit is contained in:
Kamran Ahmed
2025-05-27 02:51:30 +01:00
parent 8e5954bff3
commit f9584cae3c
1 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/RoadmapAIChat/UserProgressList.tsx
View File

@@ -23,19 +23,36 @@ export function UserProgressList(props: UserProgressListProps) {
const progressPercentage = getPercentage(totalFinished, totalTopicCount);
return (
<div className="relative my-6 flex flex-col gap-2 rounded-lg border border-gray-200 bg-white p-2 first:mt-0 last:mb-0">
<div className="flex items-center gap-4">
<div className="relative h-1.5 grow overflow-hidden rounded-md bg-gray-200">
<div
className="absolute inset-0 bg-gray-400"
style={{ width: `${progressPercentage}%` }}
/>
<div className="relative my-6 flex flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 first:mt-0 last:mb-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-600">Progress</span>
<span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
{progressPercentage}%
</span>
</div>
<span className="text-sm font-medium text-gray-500">
{totalFinished} / {totalTopicCount}
<span className="text-sm hidden md:block font-medium text-gray-600">
{totalFinished} / {totalTopicCount} topics
</span>
</div>
<div className="relative h-2 w-full overflow-hidden rounded-full bg-gray-100">
<div
className="absolute inset-0 bg-gradient-to-r from-green-500 to-green-600 transition-all duration-300"
style={{ width: `${progressPercentage}%` }}
/>
</div>
<div className="flex items-center gap-4 text-xs text-gray-500">
<div className="flex items-center gap-1">
<div className="h-2 w-2 rounded-full bg-green-500" />
<span>Completed: {doneCount}</span>
</div>
<div className="flex items-center gap-1">
<div className="h-2 w-2 rounded-full bg-gray-400" />
<span>Skipped: {skippedCount}</span>
</div>
</div>
</div>
);
}