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

Created part of the homepage of the new Figma designs

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-11 17:58:06 +01:00
parent 9a7853bd05
commit b2232df0c7
5 changed files with 91 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/pages/index.tsx
View File

@@ -3,6 +3,7 @@ import Head from "next/head";
import SingleDatasetChart from "@/components/UserResultChart";
import Navbar from "@/components/Navbar";
import ProfileCard from "@/components/ProfileCard";
import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {User} from "@/interfaces/user";
@@ -17,6 +18,7 @@ import {ToastContainer} from "react-toastify";
import {capitalize} from "lodash";
import {Module} from "@/interfaces";
import clsx from "clsx";
import ProgressBar from "@/components/Low/ProgressBar";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
@@ -40,6 +42,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
export default function Home() {
const [showDiagnostics, setShowDiagnostics] = useState(false);
const {user} = useUser({redirectTo: "/login"});
const {stats} = useStats(user?.id);
useEffect(() => {
if (user) setShowDiagnostics(user.isFirstLogin);
@@ -87,21 +90,48 @@ export default function Home() {
<Sidebar path="/" />
<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12">
<section className="w-full flex gap-8">
<img src={user.profilePicture} alt={user.name} className="w-44 aspect-square rounded-3xl" />
<div className="flex flex-col gap-8 py-4 w-full">
<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 justify-between w-full gap-8">
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 py-2">
<h2 className="font-bold text-3xl">{user.name}</h2>
<span className="font-thin text-2xl text-neutral-500">{capitalize(user.type)}</span>
</div>
<div className="relative w-32 max-w-xs self-end h-10 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center">
<div
style={{width: `${Math.round((calculateAverageLevel() * 100) / 9)}%`}}
className="absolute top-0 left-0 h-full overflow-hidden bg-mti-orange"
/>
<span className="z-10 justify-self-center text-white text-sm font-bold">
Level {calculateAverageLevel().toFixed(1)}
</span>
<ProgressBar
label={`Level ${calculateAverageLevel().toFixed(1)}`}
percentage={Math.round((calculateAverageLevel() * 100) / 9)}
color="blue"
className="max-w-xs w-32 self-end h-10"
/>
</div>
<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-xl" />
<div className="flex justify-between w-full mt-8">
<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">
<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{totalExams(stats)}</span>
<span className="font-normal text-base">Exams</span>
</div>
</div>
<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">
<BsPencil className="w-8 h-8 text-mti-blue-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{stats.length}</span>
<span className="font-normal text-base">Exercises</span>
</div>
</div>
<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">
<BsStar className="w-8 h-8 text-mti-blue-light" />
</div>
<div className="flex flex-col">
<span className="font-bold text-xl">{averageScore(stats)}%</span>
<span className="font-normal text-base">Average Score</span>
</div>
</div>
</div>
</div>