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

Completed more of the home page of the new designs

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-12 09:31:20 +01:00
parent b2232df0c7
commit 6fe8a678ea
3 changed files with 99 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Low/ProgressBar.tsx
View File

@@ -8,9 +8,15 @@ interface Props {
} }
export default function ProgressBar({label, percentage, color, className}: Props) { export default function ProgressBar({label, percentage, color, className}: Props) {
const progressColorClass: {[key in typeof color]: string} = {
blue: "bg-mti-blue-light",
orange: "bg-mti-orange-light",
green: "bg-mti-green-light",
};
return ( return (
<div className={clsx("relative rounded-full bg-gray-200 overflow-hidden flex items-center justify-center", className)}> <div className={clsx("relative rounded-full bg-mti-gray-anti-flash overflow-hidden flex items-center justify-center", className)}>
<div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", `bg-mti-${color}-light`)} /> <div style={{width: `${percentage}%`}} className={clsx("absolute top-0 left-0 h-full overflow-hidden", progressColorClass[color])} />
<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span> <span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
</div> </div>
); );

93
src/pages/index.tsx
View File

@@ -3,7 +3,7 @@ import Head from "next/head";
import SingleDatasetChart from "@/components/UserResultChart"; import SingleDatasetChart from "@/components/UserResultChart";
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import ProfileCard from "@/components/ProfileCard"; import ProfileCard from "@/components/ProfileCard";
import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs"; import {BsFileEarmarkText, BsPencil, BsStar, BsBook, BsHeadphones, BsPen, BsMegaphone} from "react-icons/bs";
import {withIronSessionSsr} from "iron-session/next"; import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session"; import {sessionOptions} from "@/lib/session";
import {User} from "@/interfaces/user"; import {User} from "@/interfaces/user";
@@ -84,18 +84,18 @@ export default function Home() {
</Head> </Head>
<ToastContainer /> <ToastContainer />
{user && ( {user && (
<main className="w-full h-[100vh] flex flex-col bg-mti-gray-light text-black"> <main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke text-black">
<Navbar user={user} /> <Navbar user={user} />
<div className="h-full w-full flex py-4 pb-8 gap-2"> <div className="h-full w-full flex py-4 pb-8 gap-2">
<Sidebar path="/" /> <Sidebar path="/" />
<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12"> <div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">
<section className="w-full flex gap-8"> <section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" /> <img src={user.profilePicture} alt={user.name} className="aspect-square h-64 rounded-3xl drop-shadow-xl" />
<div className="flex flex-col gap-4 py-4 w-full"> <div className="flex flex-col gap-4 py-4 w-full">
<div className="flex justify-between w-full gap-8"> <div className="flex justify-between w-full gap-8">
<div className="flex flex-col gap-2 py-2"> <div className="flex flex-col gap-2 py-2">
<h2 className="font-bold text-3xl">{user.name}</h2> <h2 className="font-bold text-3xl">{user.name}</h2>
<span className="font-thin text-2xl text-neutral-500">{capitalize(user.type)}</span> <span className="font-normal text-2xl text-mti-gray-taupe">{capitalize(user.type)}</span>
</div> </div>
<ProgressBar <ProgressBar
label={`Level ${calculateAverageLevel().toFixed(1)}`} label={`Level ${calculateAverageLevel().toFixed(1)}`}
@@ -104,38 +104,109 @@ export default function Home() {
className="max-w-xs w-32 self-end h-10" className="max-w-xs w-32 self-end h-10"
/> />
</div> </div>
<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-xl" /> <ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-lg" />
<div className="flex justify-between w-full mt-8"> <div className="flex justify-between w-full mt-8">
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-slate-300 bg-slate-50 flex items-center justify-center rounded-xl"> <div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" /> <BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-bold text-xl">{totalExams(stats)}</span> <span className="font-bold text-xl">{totalExams(stats)}</span>
<span className="font-normal text-base">Exams</span> <span className="font-normal text-base text-mti-gray-dim">Exams</span>
</div> </div>
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-slate-300 bg-slate-50 flex items-center justify-center rounded-xl"> <div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsPencil className="w-8 h-8 text-mti-blue-light" /> <BsPencil className="w-8 h-8 text-mti-blue-light" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-bold text-xl">{stats.length}</span> <span className="font-bold text-xl">{stats.length}</span>
<span className="font-normal text-base">Exercises</span> <span className="font-normal text-base text-mti-gray-dim">Exercises</span>
</div> </div>
</div> </div>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="w-16 h-16 border border-slate-300 bg-slate-50 flex items-center justify-center rounded-xl"> <div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsStar className="w-8 h-8 text-mti-blue-light" /> <BsStar className="w-8 h-8 text-mti-blue-light" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span> <span className="font-bold text-xl">{averageScore(stats)}%</span>
<span className="font-normal text-base">Average Score</span> <span className="font-normal text-base text-mti-gray-dim">Average Score</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section className="flex flex-col gap-3">
<span className="font-bold text-lg">Bio</span>
<span className="text-mti-gray-taupe">
Patricia Smith is a dedicated and enthusiastic student. Her passion for knowledge drives her to constantly seek
new academic challenges. She is recognized for her exemplary work ethic, active participation in the classroom,
and commitment to helping her peers. Her insatiable curiosity has led her to explore a wide range of areas of
study, making her a versatile and adaptable learner. Patricia is a true academic leader, inspiring other students
to pursue their own educational goals.
</span>
</section>
<section className="flex flex-col gap-3">
<span className="font-bold text-lg">Score History</span>
<div className="grid grid-cols-2 gap-6">
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
<div className="flex gap-3 items-center">
<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsBook className="text-ielts-reading w-5 h-5" />
</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>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={86} className="w-full h-2" />
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
<div className="flex gap-3 items-center">
<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsPen className="text-ielts-writing w-5 h-5" />
</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>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={91} className="w-full h-2" />
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
<div className="flex gap-3 items-center">
<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsHeadphones className="text-ielts-listening w-5 h-5" />
</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>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={56} className="w-full h-2" />
</div>
</div>
<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4">
<div className="flex gap-3 items-center">
<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-xl">
<BsMegaphone className="text-ielts-speaking w-5 h-5" />
</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>
</div>
</div>
<div className="pl-14">
<ProgressBar color="blue" label="" percentage={26} className="w-full h-2" />
</div>
</div>
</div>
</section>
</div> </div>
</div> </div>
</main> </main>

10
tailwind.config.js
View File

@@ -8,7 +8,15 @@ module.exports = {
orange: {DEFAULT: "#FF6000", dark: "#cc4402", light: "#ff790a", ultralight: "#ffdaa5"}, orange: {DEFAULT: "#FF6000", dark: "#cc4402", light: "#ff790a", ultralight: "#ffdaa5"},
green: {DEFAULT: "#307912", dark: "#2a6014", light: "#3d9f11", ultralight: "#c6edaf"}, green: {DEFAULT: "#307912", dark: "#2a6014", light: "#3d9f11", ultralight: "#c6edaf"},
blue: {DEFAULT: "#0696ff", dark: "#007ff8", light: "#1eb3ff", ultralight: "#b5edff"}, blue: {DEFAULT: "#0696ff", dark: "#007ff8", light: "#1eb3ff", ultralight: "#b5edff"},
gray: {light: "#F9F9F9", dark: "#E0E0E0"}, gray: {
seasalt: "#F9F9F9",
smoke: "#F5F5F5",
taupe: "#898492",
dim: "#696F79",
cool: "8692A6",
platinum: "#DBDBDB",
"anti-flash": "#EAEBEC",
},
}, },
ielts: { ielts: {
reading: {DEFAULT: "#1EB3FF", transparent: "rgba(255, 99, 132, 0.5)"}, reading: {DEFAULT: "#1EB3FF", transparent: "rgba(255, 99, 132, 0.5)"},