32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {User} from "@/interfaces/user";
|
|
import {levelCalculator} from "@/resources/level";
|
|
import clsx from "clsx";
|
|
import LevelLabel from "./LevelLabel";
|
|
import LevelProgressBar from "./LevelProgressBar";
|
|
import {Avatar} from "primereact/avatar";
|
|
|
|
interface Props {
|
|
user: User;
|
|
className?: string;
|
|
}
|
|
|
|
export default function ProfileLevel({user, className}: Props) {
|
|
const levelResult = levelCalculator(user.experience);
|
|
|
|
return (
|
|
<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
|
|
<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
|
|
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
|
|
{user.profilePicture.length === 0 && (
|
|
<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1 items-center">
|
|
<LevelLabel experience={user.experience} />
|
|
<LevelProgressBar experience={user.experience} className="text-black" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|