Updated the code to use the new desired levels

This commit is contained in:
Tiago Ribeiro
2023-06-12 14:05:48 +01:00
parent 6fe8a678ea
commit e864e16064
3 changed files with 39 additions and 9 deletions

View File

@@ -156,11 +156,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Reading</span>
<span className="text-sm font-normal text-mti-gray-dim">86%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.reading} / Level {user.desiredLevels.reading}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={86} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
className="w-full h-2"
/>
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -170,11 +177,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Writing</span>
<span className="text-sm font-normal text-mti-gray-dim">91%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.writing} / Level {user.desiredLevels.writing}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={91} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
className="w-full h-2"
/>
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -184,11 +198,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Listening</span>
<span className="text-sm font-normal text-mti-gray-dim">56%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.listening} / Level {user.desiredLevels.listening}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={56} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
className="w-full h-2"
/>
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
@@ -198,11 +219,18 @@ export default function Home() {
</div>
<div className="flex justify-between w-full">
<span className="font-extrabold text-sm">Speaking</span>
<span className="text-sm font-normal text-mti-gray-dim">26%</span>
<span className="text-sm font-normal text-mti-gray-dim">
Level {user.levels.speaking} / Level {user.desiredLevels.speaking}
</span>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={26} className="w-full h-2" />
<ProgressBar
color="blue"
label=""
percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
className="w-full h-2"
/>
</div>
</div>
</div>