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

23
src/components/Low/Button.tsx Normal file
View File

@@ -0,0 +1,23 @@
import clsx from "clsx";
import {ReactNode} from "react";
interface Props {
children: ReactNode;
color?: "orange" | "green" | "blue";
variant?: "outline" | "solid";
onClick: () => void;
}
export default function Button({color = "green", variant = "solid", children, onClick}: Props) {
const colorClassNames: {[key in typeof color]: string} = {
green: "bg-mti-green hover:bg-mti-green-dark disabled:text-mti-green disabled:bg-mti-green-ultralight",
blue: "bg-mti-blue hover:bg-mti-blue-dark disabled:text-mti-blue disabled:bg-mti-blue-ultralight",
orange: "bg-mti-orange hover:bg-mti-orange-dark disabled:text-mti-orange disabled:bg-mti-orange-ultralight",
};
return (
<button onClick={onClick} className={clsx("py-3 px-6 text-white", colorClassNames[color])}>
{children}
</button>
);
}

17
src/components/Low/ProgressBar.tsx Normal file
View File

@@ -0,0 +1,17 @@
import clsx from "clsx";
interface Props {
label: string;
percentage: number;
color: "blue" | "orange" | "green";
className?: string;
}
export default function ProgressBar({label, percentage, color, className}: Props) {
return (
<div className={clsx("relative rounded-full bg-gray-200 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`)} />
<span className="z-10 justify-self-center text-white text-sm font-bold">{label}</span>
</div>
);
}

6
src/components/Sidebar.tsx
View File

@@ -24,11 +24,11 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
<Link
href={keyPath}
className={clsx(
"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:bg-mti-green hover:text-white transition duration-300 ease-in-out",
path === keyPath && "bg-mti-green text-white",
"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-green-light hover:text-white transition duration-300 ease-in-out",
path === keyPath && "bg-mti-green-light text-white",
)}>
<Icon size={20} />
<span className="text-lg font-medium">{label}</span>
<span className="text-lg font-semibold">{label}</span>
</Link>
);

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>