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
src/components
charts
GithubContributionChart.js
profile/progress
UserProgress.js

2
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">

84
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;
@ -63,22 +65,72 @@ const UserProgress = () => {
<ul className="space-y-4 mb-6">
{tasks.map((task, index) => (
<li key={index} 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>
<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">
{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>
) : (
<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">
{task.tier}
</span>
<span className="bg-blue-500 text-white text-xs px-2 py-1 rounded-full w-20 text-center">
{task.tier}
</span>
</div>
)}
</li>
))}
</ul>