Separated the ProfileLevel into multiple components and made a Card one

src/components/LevelProgressBar.tsx

@@ -0,0 +1,25 @@
+import {levelCalculator} from "@/resources/level";
+import clsx from "clsx";
+
+interface Props {
+	experience: number;
+	className?: string;
+	progressBarWidth?: string;
+}
+
+export default function LevelProgressBar({experience, className, progressBarWidth = "w-64"}: Props) {
+	const levelResult = levelCalculator(experience);
+
+	return (
+		<div className={clsx("flex flex-col items-center", className)}>
+			<div className="flex gap-3 items-center">
+				<span>Lvl. {levelResult.currentLevel}</span>
+				<progress className={clsx("progress progress-success", progressBarWidth)} value={levelResult.percentage} max="100" />
+				<span>Lvl. {levelResult.nextLevel}</span>
+			</div>
+			<span className="text-xs">
+				{experience.toLocaleString("en")} / {levelResult.nextLevelExperience.toLocaleString("en")}
+			</span>
+		</div>
+	);
+}