devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separated the ProfileLevel into multiple components and made a Card one

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-03-09 15:56:51 +00:00
parent aa869dd2ce
commit be7665fab8
9 changed files with 124 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ProfileLevel.tsx
View File

@@ -2,6 +2,8 @@
import {User} from "@/interfaces/user";
import {levelCalculator} from "@/resources/level";
import clsx from "clsx";
import LevelLabel from "./LevelLabel";
import LevelProgressBar from "./LevelProgressBar";
interface Props {
user: User;
@@ -16,18 +18,9 @@ export default function ProfileLevel({user, className}: Props) {
<div className="w-24 rounded-full">
<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
</div>
<div className="flex flex-col gap-4 items-center">
<span className="text-xl font-semibold text-success">{levelResult.label}</span>
<div className="flex flex-col items-center">
<div className="flex gap-3 items-center">
<span>Lvl. {levelResult.currentLevel}</span>
<progress className="progress progress-success w-64" value={levelResult.percentage} max="100" />
<span>Lvl. {levelResult.nextLevel}</span>
</div>
<span className="text-xs">
{user.experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
</span>
</div>
<div className="flex flex-col gap-1 items-center">
<LevelLabel experience={user.experience} />
<LevelProgressBar experience={user.experience} className="text-black" />
</div>
</div>
);