Style and functional improvements to user progress

src/components/charts/GithubContributionChart.js

@@ -56,7 +56,7 @@ const GithubContributionChart = ({ username }) => {
             <div className="flex justify-between items-center pr-1">
                 <p className="mb-2">Total commits: {totalCommits}</p>
                 <i className="pi pi-question-circle cursor-pointer" data-pr-tooltip="Total number of commits made to GitHub repositories over the last 6 months. (may not be 100% accurate)" />
-                <Tooltip target=".pi-question-circle" position="top"/>
+                <Tooltip target=".pi-question-circle" position="top" />
             </div>
             }
             <div className="flex flex-wrap gap-1">

src/components/profile/progress/UserProgress.js

@@ -1,9 +1,11 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import { ProgressBar } from 'primereact/progressbar';
+import { Accordion, AccordionTab } from 'primereact/accordion';
 
 const UserProgress = () => {
     const [progress, setProgress] = useState(0);
     const [currentTier, setCurrentTier] = useState('Pleb');
+    const [expanded, setExpanded] = useState(null);
 
     const getProgress = async () => {
         return 10;
@@ -27,8 +29,8 @@ const UserProgress = () => {
 
     const tasks = [
         { status: 'Create Account', completed: true, tier: 'Pleb' },
-        { 
+        {
-            status: 'Complete PlebDevs Starter', 
+            status: 'Complete PlebDevs Starter',
             completed: false,
             tier: 'New Dev',
             subTasks: [
@@ -45,7 +47,7 @@ const UserProgress = () => {
         <div className="bg-gray-900 rounded-3xl p-6 w-[500px] mx-auto my-8">
             <h1 className="text-3xl font-bold text-white mb-2">Your Dev Journey</h1>
             <p className="text-gray-400 mb-4">Track your progress from Pleb to Plebdev</p>
-            
+
             <div className="flex justify-between items-center mb-2">
                 <span className="text-gray-300">Progress</span>
                 <span className="text-gray-300">{progress}%</span>
@@ -55,34 +57,84 @@ const UserProgress = () => {
                     className: 'hidden'
                 }
             }} />
-            
+
             <div className="mb-6">
                 <span className="text-white text-lg font-semibold">Current Tier: </span>
                 <span className="bg-green-500 text-white px-3 py-1 rounded-full">{currentTier}</span>
             </div>
-            
+
             <ul className="space-y-4 mb-6">
                 {tasks.map((task, index) => (
-                    <li key={index} className="flex items-center justify-between">
+                    <li key={index}>
-                        <div className="flex items-center">
+                        {task.subTasks ? (
-                            {task.completed ? (
+                            <Accordion className="border-none" onTabOpen={(e) => setExpanded(true)} onTabClose={(e) => setExpanded(false)}>
-                                <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
+                                <AccordionTab
-                                    <i className="pi pi-check text-white text-sm"></i>
+                                    pt={{
+                                        root: { className: 'border-none p-0' },
+                                        header: { className: 'border-none p-0' },
+                                        headerAction: { className: 'border-none p-0' },
+                                        content: { className: 'border-none rounded-lg mt-2 py-1' },
+                                        accordiontab: { className: 'border-none p-0' },
+                                        headerIcon: { className: 'hidden' },
+                                    }}
+                                    header={
+                                        <div className="bg-gray-900 flex items-center justify-between w-full font-normal">
+                                            <div className="flex items-center">
+                                                <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
+                                                    <span className="text-white text-sm">{index + 1}</span>
+                                                </div>
+                                                <span className="text-lg text-gray-400">{task.status}</span>
+                                                <i className={`pi pi-chevron-down text-gray-400 ml-2 transition-transform duration-300 ${expanded ? 'rotate-180' : ''}`} />
+                                            </div>
+                                            <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full w-20 text-center">
+                                                {task.tier}
+                                            </span>
+                                        </div>
+                                    }
+                                >
+                                    <ul className="space-y-2 mt-2 ml-9">
+                                        {task.subTasks.map((subTask, subIndex) => (
+                                            <li key={subIndex} className="flex items-center">
+                                                {subTask.completed ? (
+                                                    <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center mr-3">
+                                                        <i className="pi pi-check text-white text-xs"></i>
+                                                    </div>
+                                                ) : (
+                                                    <div className="w-4 h-4 bg-gray-700 rounded-full flex items-center justify-center mr-3">
+                                                        <span className="text-white text-xs">{subIndex + 1}</span>
+                                                    </div>
+                                                )}
+                                                <span className={`text-base ${subTask.completed ? 'text-white' : 'text-gray-400'}`}>
+                                                    {subTask.status}
+                                                </span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </AccordionTab>
+                            </Accordion>
+                        ) : (
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center">
+                                    {task.completed ? (
+                                        <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
+                                            <i className="pi pi-check text-white text-sm"></i>
+                                        </div>
+                                    ) : (
+                                        <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
+                                            <span className="text-white text-sm">{index + 1}</span>
+                                        </div>
+                                    )}
+                                    <span className={`text-lg ${task.completed ? 'text-white' : 'text-gray-400'}`}>{task.status}</span>
                                 </div>
-                            ) : (
+                                <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full w-20 text-center">
-                                <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
+                                    {task.tier}
-                                    <span className="text-white text-sm">{index + 1}</span>
+                                </span>
-                                </div>
+                            </div>
-                            )}
+                        )}
-                            <span className={`text-lg ${task.completed ? 'text-white' : 'text-gray-400'}`}>{task.status}</span>
-                        </div>
-                        <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full w-20 text-center">
-                            {task.tier}
-                        </span>
                     </li>
                 ))}
             </ul>
-            
+
             <button className="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold">
                 View Badges
             </button>