add badges

src/components/player/PlayerChart.tsx

@@ -113,9 +113,5 @@ export default function PlayerChart({
     ],
   };
 
-  return (
-    <div className="h-[310px] w-full">
-      <Line className={className} options={options} data={data} />
-    </div>
-  );
+  return <Line className={className} options={options} data={data} />;
 }

src/components/player/PlayerInfo.tsx

@@ -20,7 +20,6 @@ import { useStore } from "zustand";
 import Avatar from "../Avatar";
 import Card from "../Card";
 import Label from "../Label";
-import PlayerChart from "./PlayerChart";
 
 const ReactCountryFlag = dynamic(() => import("react-country-flag"));
 
@@ -158,6 +157,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             )}
           </div>
         </div>
+
         <div className="mt-1 flex w-full flex-col items-center gap-2 md:items-start">
           {/* Name */}
           <p className="text-2xl leading-none">{playerData.name}</p>
@@ -249,9 +249,6 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               </>
             )}
           </div>
-
-          {/* Chart */}
-          <PlayerChart scoresaber={playerData} />
         </div>
       </div>
     </Card>

src/components/player/PlayerPage.tsx

@@ -7,8 +7,11 @@ import Scores from "@/components/player/Scores";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
+import clsx from "clsx";
 import dynamic from "next/dynamic";
+import Image from "next/image";
 import { useEffect, useState } from "react";
+import PlayerChart from "./PlayerChart";
 import PlayerInfo from "./PlayerInfo";
 
 const Error = dynamic(() => import("@/components/Error"));
@@ -79,11 +82,38 @@ export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
   }
 
   const playerData = player.player;
+  const badges = playerData.badges;
 
   return (
     <main>
       <Container>
         <PlayerInfo playerData={playerData} />
+        {/* Chart */}
+        <Card className="mt-2">
+          {/* Badges */}
+          <div
+            className={clsx(
+              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
+              badges.length > 0 ? "block" : "hidden",
+            )}
+          >
+            {badges.map((badge) => {
+              return (
+                <Image
+                  key={badge.image}
+                  src={badge.image}
+                  alt={badge.description}
+                  title={badge.description}
+                  width={80}
+                  height={30}
+                />
+              );
+            })}
+          </div>
+          <div className="h-[320px] w-full">
+            <PlayerChart scoresaber={playerData} />
+          </div>
+        </Card>
         <Scores
           playerData={playerData}
           page={Number(page)}