- Updated the profile level component to be by itself;

- Made a rough experience and label calculator;

src/components/ProfileLevel.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable @next/next/no-img-element */
+import {User} from "@/interfaces/user";
+import {levelCalculator} from "@/resources/level";
+import clsx from "clsx";
+
+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-24 rounded-full">
+				<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
+			</div>
+			<div className="flex flex-col gap-4 items-center">
+				<span className="text-xl font-semibold text-success">{levelResult.label}</span>
+				<div className="flex flex-col items-center">
+					<div className="flex gap-3 items-center">
+						<span>Lvl. {levelResult.currentLevel}</span>
+						<progress className="progress progress-success w-64" value={levelResult.percentage} max="100" />
+						<span>Lvl. {levelResult.nextLevel}</span>
+					</div>
+					<span className="text-xs">
+						{user.experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}