added top and hot plays

components/userRatingBaseHotList/page.tsx

@@ -0,0 +1,71 @@
+import React, { FC } from "react";
+import { getDifficultyText } from "@/lib/helpers";
+
+type userRatingBaseList = {
+  title: string;
+  artist: string;
+  genre: string;
+  chartId: string | number;
+  level: string | number;
+  jacketPath: string;
+  rating: number;
+  version: number;
+  index: number;
+  musicId: number | null;
+  difficultId: number | null;
+  score: number | null;
+};
+
+type ChunithmProfileHotPlays = {
+  chuniProfileHotPlays: {
+    hotRating: userRatingBaseList[];
+  };
+};
+export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
+  chuniProfileHotPlays,
+}) => {
+  return (
+    <div>
+      {chuniProfileHotPlays.hotRating.map((playerHotRatingList, index) => {
+        const jacketPath = playerHotRatingList.jacketPath?.replace(
+          ".dds",
+          ".png",
+        );
+        return (
+          <div key={index} className="center flex p-2">
+            <div className="m-4 font-bold">{index + 1}.</div>
+            {jacketPath && (
+              <img
+                src={`/JacketArt/${jacketPath}`}
+                alt="Jacket"
+                style={{ width: "120px", height: "120px" }}
+              />
+            )}
+            <div>
+              <ul className="pl-2">
+                <li>
+                  <strong>Title: </strong> {playerHotRatingList.title}
+                </li>
+                <li>
+                  <strong>Level: </strong> {playerHotRatingList.level}
+                </li>
+                <li>
+                  <strong>Difficulty: </strong>
+                  {getDifficultyText(Number(playerHotRatingList.chartId))}
+                </li>
+                <li>
+                  <strong>Score: </strong>{" "}
+                  {playerHotRatingList.score?.toLocaleString()}
+                </li>
+                <li>
+                  <strong>Rating: </strong>{" "}
+                  {(playerHotRatingList.rating / 100).toFixed(2)}
+                </li>
+              </ul>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};