XP meter in profile

components/XpProgressBar.tsx

@@ -0,0 +1,19 @@
+import { User } from "@/lib/Types";
+import { xpRequiredForNextLevel } from "@/lib/Xp";
+import { useState } from "react";
+
+export default function XpProgressBar({ user, size }: { user: User, size: string }) {
+  const [hovered, setHovered] = useState(false);
+
+	return (
+		<div
+			className={`radial-progress text-accent m-2 text-${hovered ? "xs" : "sm"}`}
+			style={{ "--value": user.xp / xpRequiredForNextLevel(user.level) * 100 , "--size": size } as any}
+			role="progressbar"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+		>
+      {hovered ? `${user.xp}/${xpRequiredForNextLevel(user.level)}` : `Lvl ${user.level}`}
+		</div>
+	);
+}

components/competition/MatchScheduleCard.tsx

@@ -287,7 +287,7 @@ export default function MatchScheduleCard(props: {
 													<div>No subjective scouter assigned</div>
 												)}
 											</div>
-											<Link
+											<a
 												className={`btn btn-primary btn-sm ${match.subjectiveScouter && usersById[match.subjectiveScouter]?.slackId && "-translate-y-1"}`}
 												href={`/${team?.slug}/${seasonSlug}/${comp?.slug}/${match._id}/subjective`}
 											>
@@ -301,7 +301,7 @@ export default function MatchScheduleCard(props: {
 															: 0
 													} in progress`}
 												)
-											</Link>
+											</a>
 										</div>
 									))}
 								</div>

pages/profile.tsx

@@ -19,6 +19,7 @@ import TeamCard from "@/components/TeamCard";
 import { UpdateModal } from "@/components/UpdateModal";
 import { Analytics } from "@/lib/client/Analytics";
 import { signOut } from "next-auth/react";
+import XpProgressBar from "@/components/XpProgressBar";
 
 const api = new ClientApi();
 
@@ -120,6 +121,7 @@ export default function Profile(props: { teamList: Team[] }) {
 									<></>
 								)}
 							</Flex>
+							{ user != null && <XpProgressBar user={user} size="4rem" /> }
 						</div>
 					</Flex>
 				</Card>