saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 19:01:19 +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

2
src/components/charts/GithubContributionChart.js
View File

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

96
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 { 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">
<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>
<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>