daphnis/components/RecentChunithmScores/page.tsx

import React, { FC } from "react";
import {
  chuni_profile_rating,
  chuni_static_music,
} from "@/prisma/schemas/artemis/generated/artemis";

type ChunithmRecent = chuni_profile_rating &
  chuni_static_music & { rating: number; jacketPath: string | undefined };

type ChunithmProfileRecentPlays = {
  chuniProfileRecentPlays: {
    recentRating: ChunithmRecent[];
  };
};

export const ChunithmRecentPlays: FC<ChunithmProfileRecentPlays> = ({
  chuniProfileRecentPlays,
}) => {
  return (
    <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>
  );
};