Finished progress

src/app/(stats)/player/[ign]/_stats/build-battle/build-battle.tsx

@@ -5,6 +5,7 @@ import { formatNumber } from "@/lib/formatters"
 import { getBuildBattleRank } from "@/lib/hypixel/build-battle/general"
 import { NonNullStats } from "@/lib/schema/player"
 import CollapsedStats from "../../_components/CollapsedStats"
+import BuildBattleTitleProgress from "./progress"
 import BuildBattleGeneralStats from "./stats"
 
 export default function BuildBattleStats({ stats }: { stats: NonNullStats["BuildBattle"] }) {
@@ -34,6 +35,8 @@ export default function BuildBattleStats({ stats }: { stats: NonNullStats["Build
                         </div>
                     </AccordionTrigger>
                     <AccordionContent>
+                        <Separator className="my-4" />
+                        <BuildBattleTitleProgress score={stats.score} />
                         <Separator className="my-4" />
                         <BuildBattleGeneralStats stats={stats} />
                         <Separator className="my-4" />

src/app/(stats)/player/[ign]/_stats/build-battle/progress.tsx

@@ -0,0 +1,25 @@
+import { getBuildBattleRank, getNextBuildBattleRank } from "@/lib/hypixel/build-battle/general"
+import { getProgress } from "@/lib/hypixel/general"
+import { cn } from "@/lib/utils"
+import GenericProgress from "../../_components/GenericProgress"
+
+export default function BuildBattleTitleProgress({ score }: { score: number }) {
+    const current = getBuildBattleRank(score)
+    const next = getNextBuildBattleRank(score)
+
+    const percent = getProgress(0, score, next !== null ? next.value : 0)
+
+    return (
+        <div className="flex gap-2 items-center">
+            <GenericProgress
+                percent={percent}
+                tooltipId="build-battle-progress"
+                tooltipContent={`${score}/${next !== null ? next.value : 0} Score`}
+                className={`bg-mc-${current.color}`}
+            />
+            <p className={cn("font-bold", next !== null ? `text-mc-${next.color}` : "text-mc-gold")}>
+                {next !== null ? next.name : "Already max rank"}
+            </p>
+        </div>
+    )
+}