100 lines
3.5 KiB
TypeScript
100 lines
3.5 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {User} from "@/interfaces/user";
|
|
import {USER_TYPE_LABELS} from "@/resources/user";
|
|
import {calculateAverageLevel} from "@/utils/score";
|
|
import {capitalize} from "lodash";
|
|
import {ReactElement} from "react";
|
|
import ProgressBar from "./Low/ProgressBar";
|
|
|
|
interface Props {
|
|
user: User;
|
|
items: {
|
|
icon: ReactElement;
|
|
value: string | number;
|
|
label: string;
|
|
tooltip?: string;
|
|
}[];
|
|
removeLevel?: boolean
|
|
children?: ReactElement;
|
|
}
|
|
|
|
export default function ProfileSummary({user, items, removeLevel = false}: Props) {
|
|
return (
|
|
<section className="w-full flex -md:flex-col gap-4 md:gap-8">
|
|
<img
|
|
src={user.profilePicture}
|
|
alt={user.name}
|
|
className="aspect-square h-20 md:h-64 rounded-3xl drop-shadow-xl object-cover -md:hidden"
|
|
/>
|
|
<div className="flex md:flex-col gap-4 md:py-4 w-full -md:items-center">
|
|
<img src={user.profilePicture} alt={user.name} className="aspect-square h-24 md:hidden rounded-3xl drop-shadow-xl object-cover" />
|
|
<div className="flex -md:flex-col justify-between w-full gap-8">
|
|
<div className="flex flex-col gap-2 py-2">
|
|
<h1 className="font-bold text-2xl md:text-4xl">{user.name}</h1>
|
|
<div className="flex items-center gap-2">
|
|
<h6 className="font-normal text-base text-mti-gray-taupe">{user.email}</h6>
|
|
<span> - </span>
|
|
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
|
|
</div>
|
|
</div>
|
|
{!removeLevel && (
|
|
<ProgressBar
|
|
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
|
|
percentage={100}
|
|
color="purple"
|
|
className="max-w-xs w-32 md:self-end h-10 -md:hidden"
|
|
/>
|
|
)}
|
|
</div>
|
|
{!removeLevel && (
|
|
<ProgressBar
|
|
label=""
|
|
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
|
|
color="red"
|
|
className="w-full h-3 drop-shadow-lg -md:hidden"
|
|
/>
|
|
)}
|
|
|
|
<div className="flex justify-between w-full mt-8 -md:hidden">
|
|
{items.map((item) => (
|
|
<div className="flex gap-4 items-center" key={item.label}>
|
|
<div
|
|
className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl relative group tooltip tooltip-bottom"
|
|
data-tip={item.tooltip}
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-xl">{item.value}</span>
|
|
<span className="font-normal text-base text-mti-gray-dim">{item.label}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<ProgressBar
|
|
label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
|
|
percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
|
|
color="purple"
|
|
className="w-full md:hidden h-8"
|
|
textClassName="!text-mti-black"
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 gap-4 w-full mt-4 md:hidden">
|
|
{items.map((item) => (
|
|
<div className="flex gap-4 items-center" key={item.label}>
|
|
<div className="w-12 h-12 md:w-16 md:h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
|
|
{item.icon}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-bold text-lg md:text-xl">{item.value}</span>
|
|
<span className="font-normal text-sm md:text-base text-mti-gray-dim">{item.label}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|