add player stat badges

src/components/player/player-stats.tsx

@@ -0,0 +1,71 @@
+import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import { ClassValue } from "clsx";
+
+type Badge = {
+  name: string;
+  color?: ClassValue;
+  create: (player: ScoreSaberPlayer) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+  {
+    name: "Ranked Play Count",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.scoreStats.rankedPlayCount);
+    },
+  },
+  {
+    name: "Total Ranked Score",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.scoreStats.totalRankedScore);
+    },
+  },
+  {
+    name: "Average Ranked Accuracy",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return player.scoreStats.averageRankedAccuracy.toFixed(2) + "%";
+    },
+  },
+  {
+    name: "Total Play Count",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.scoreStats.totalPlayCount);
+    },
+  },
+  {
+    name: "Total Score",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.scoreStats.totalScore);
+    },
+  },
+  {
+    name: "Total Replays Watched",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.scoreStats.replaysWatched);
+    },
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerStats({ player }: Props) {
+  return (
+    <div className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}>
+      {badges.map((badge, index) => {
+        const toRender = badge.create(player);
+        if (toRender === undefined) {
+          return <div key={index} />;
+        }
+
+        return <StatValue key={index} color={badge.color} name={badge.name} value={toRender} />;
+      })}
+    </div>
+  );
+}