saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-05-19 08:22:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style and functional improvements to user progress

Browse Source
This commit is contained in:
austinkelsay 2024-09-21 15:35:38 -05:00
parent f5748b4823
commit 1f8b69fb22
2 changed files with 75 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/profile/progress/UserProgress.js
View File

@ -1,9 +1,11 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { ProgressBar } from 'primereact/progressbar'; import { ProgressBar } from 'primereact/progressbar';
import { Accordion, AccordionTab } from 'primereact/accordion';
const UserProgress = () => { const UserProgress = () => {
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
const [currentTier, setCurrentTier] = useState('Pleb'); const [currentTier, setCurrentTier] = useState('Pleb');
const [expanded, setExpanded] = useState(null);
const getProgress = async () => { const getProgress = async () => {
return 10; return 10;
@ -63,7 +65,55 @@ const UserProgress = () => {
<ul className="space-y-4 mb-6"> <ul className="space-y-4 mb-6">
{tasks.map((task, index) => ( {tasks.map((task, index) => (
<li key={index} className="flex items-center justify-between"> <li key={index}>
{task.subTasks ? (
<Accordion className="border-none" onTabOpen={(e) => setExpanded(true)} onTabClose={(e) => setExpanded(false)}>
<AccordionTab
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"> <div className="flex items-center">
{task.completed ? ( {task.completed ? (
<div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3"> <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
@ -79,6 +129,8 @@ const UserProgress = () => {
<span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full w-20 text-center"> <span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full w-20 text-center">
{task.tier} {task.tier}
</span> </span>
</div>
)}
</li> </li>
))} ))}
</ul> </ul>