Updated bedwars progress

src/app/(stats)/player/[ign]/_stats/bedwars/components.tsx

@@ -1,3 +1,4 @@
+import { formatNumber } from "@/lib/formatters"
 import { bedwarsLevelColors, getBedwarsStar, getPrestigeName, getTextColor } from "@/lib/hypixel/bedwars/bedwars"
 import { getBWLevelForExp } from "@/lib/hypixel/bedwars/level"
 import { cn } from "@/lib/utils"
@@ -13,11 +14,16 @@ export function BedwarsLevel({ xp }: { xp: number }) {
     return <Multicolored val={val} color={color} />
 }
 
-export function BedwarsProgress({ level, percent }: { level: number, percent: number }) {
+export function BedwarsProgress({ level, percent, currentXp, ceilingXp }: { level: number, percent: number, currentXp: number, ceilingXp: number }) {
     return (
         <div className="flex items-center mb-10">
             <LevelNumber level={level} className="mr-2" />
-            <Progress level={level} percent={percent} />
+            <Progress
+                level={level}
+                percent={percent}
+                tooltipId="bedwars-progress"
+                tooltipContent={`${formatNumber(currentXp)}/${formatNumber(ceilingXp)} XP`}
+            />
             <LevelNumber level={level + 1} className="ml-2" />
         </div>
     )
@@ -48,7 +54,7 @@ export function BedWarsPrestige({ level }: { level: number }) {
 function LevelNumber({ level, className }: { level: number, className?: string }) {
     if (level >= 1000 && level < 1100) {
         return (
-            <div
+            <p
                 className={className}
                 style={{
                     backgroundImage: "linear-gradient(to left,#a0a,#f5f,#5ff,#5f5,#ff5,#fa0,#f55)",
@@ -57,17 +63,17 @@ function LevelNumber({ level, className }: { level: number, className?: string }
                 }}
             >
                 {level}
-            </div>
+            </p>
         )
     }
 
-    return <div className={cn(`text-mc-${getTextColor(level)}`, className)}>{level}</div>
+    return <p className={cn(`text-mc-${getTextColor(level)}`, className)}>{level}</p>
 }
 
-function Progress({ level, percent }: { level: number, percent: number }) {
+function Progress({ level, percent, tooltipId, tooltipContent }: { level: number, percent: number, tooltipId: string, tooltipContent: string }) {
     if (level >= 1000 && level < 1100) {
-        return <GenericProgress percent={percent} rainbow={true} />
+        return <GenericProgress percent={percent} rainbow={true} tooltipId={tooltipId} tooltipContent={tooltipContent} />
     }
 
-    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} />
+    return <GenericProgress percent={percent} className={`bg-mc-${getTextColor(level)}`} tooltipId={tooltipId} tooltipContent={tooltipContent} />
 }