finished top 30

components/RecentChunithmScores/page.tsx

@@ -1,23 +1,66 @@
-import { chuni_profile_rating, chuni_profile_recent_rating } from '@/prisma/schemas/artemis/generated/artemis';
-import React, { FC } from 'react';
+import React, { FC } from "react";
+import {
+  chuni_profile_rating,
+  chuni_static_music,
+} from "@/prisma/schemas/artemis/generated/artemis";
 
-type chunithm_recent = chuni_profile_rating
+type ChunithmRecent = chuni_profile_rating &
+  chuni_static_music & { rating: number; jacketPath: string | undefined };
 
 type ChunithmProfileRecentPlays = {
   chuniProfileRecentPlays: {
-    recentRating: chunithm_recent[];
+    recentRating: ChunithmRecent[];
   };
 };
 
-export const ChunithmRecentPlays: FC<ChunithmProfileRecentPlays> = ({ chuniProfileRecentPlays }) => {
+export const ChunithmRecentPlays: FC<ChunithmProfileRecentPlays> = ({
+  chuniProfileRecentPlays,
+}) => {
   return (
     <div>
-      {chuniProfileRecentPlays.recentRating.map((playersRecentRatingList, index) => (
-        <div key={index}>
-      {playersRecentRatingList.score}
-       
-        </div>
-      ))}
+      {chuniProfileRecentPlays.recentRating.map(
+        (playersRecentRatingList, index) => {
+          const jacketPath = playersRecentRatingList.jacketPath?.replace(
+            ".dds",
+            ".png",
+          );
+
+          return (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                marginBottom: "8px",
+              }}
+            >
+              <div style={{ marginRight: "20px" }}>{index + 1}.</div>
+              {jacketPath && (
+                <img
+                  src={`/JacketArt/${jacketPath}`}
+                  alt="Jacket"
+                  style={{ width: "80px", height: "80px" }}
+                />
+              )}
+              <div>
+                <ul className="pl-2">
+                  <li>
+                    <strong>Title:</strong> {playersRecentRatingList.title}
+                  </li>
+                  <li>
+                    <strong>Score:</strong>{" "}
+                    {playersRecentRatingList.score?.toLocaleString()}
+                  </li>
+                  <li>
+                    <strong>Rating:</strong>{" "}
+                    {(playersRecentRatingList.rating / 100).toFixed(2)}
+                  </li>
+                </ul>
+              </div>
+            </div>
+          );
+        },
+      )}
     </div>
   );
 };