cleanup score badges

src/components/leaderboard/leaderboard-score-stats.tsx

@@ -6,7 +6,7 @@ import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
 import Tooltip from "@/components/tooltip";
-import { ScoreBadge } from "@/components/score/score-badge";
+import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
 
 const badges: ScoreBadge[] = [
   {
@@ -75,14 +75,7 @@ type Props = {
 export default function LeaderboardScoreStats({ score, leaderboard }: Props) {
   return (
     <div className={`grid grid-cols-3 grid-rows-1 gap-1 ml-0 lg:ml-2`}>
-      {badges.map((badge, index) => {
+      <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
-        const toRender = badge.create(score, leaderboard);
-        const color = badge.color?.(score, leaderboard);
-        if (toRender === undefined) {
-          return <div key={index} />;
-        }
-        return <StatValue key={index} color={color} value={toRender} />;
-      })}
     </div>
   );
 }

src/components/score/score-badge.tsx

@@ -1,5 +1,6 @@
 import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
 import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import StatValue from "@/components/stat-value";
 
 /**
  * A badge to display in the score stats.
@@ -12,3 +13,23 @@ export type ScoreBadge = {
     leaderboard: ScoreSaberLeaderboardToken
   ) => string | React.ReactNode | undefined;
 };
+
+/**
+ * The badges to display in the score stats.
+ */
+type ScoreBadgeProps = {
+  badges: ScoreBadge[];
+  score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export function ScoreBadges({ badges, score, leaderboard }: ScoreBadgeProps) {
+  return badges.map((badge, index) => {
+    const toRender = badge.create(score, leaderboard);
+    const color = badge.color?.(score, leaderboard);
+    if (toRender === undefined) {
+      return <div key={index} />;
+    }
+    return <StatValue key={index} color={color} value={toRender} />;
+  });
+}

src/components/score/score-stats.tsx

@@ -6,7 +6,7 @@ import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import Tooltip from "@/components/tooltip";
-import { ScoreBadge } from "@/components/score/score-badge";
+import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
 
 const badges: ScoreBadge[] = [
   {
@@ -92,14 +92,7 @@ type Props = {
 export default function ScoreStats({ score, leaderboard }: Props) {
   return (
     <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
-      {badges.map((badge, index) => {
+      <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
-        const toRender = badge.create(score, leaderboard);
-        const color = badge.color?.(score, leaderboard);
-        if (toRender === undefined) {
-          return <div key={index} />;
-        }
-        return <StatValue key={index} color={color} value={toRender} />;
-      })}
     </div>
   );
 }