changed list into grid

components/userRatingBaseList/page.tsx

@@ -0,0 +1,74 @@
+import React, { FC } from "react";
+import {
+  chuni_profile_rating,
+  chuni_static_music,
+} from "@/prisma/schemas/artemis/generated/artemis";
+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 chunithmTopPlays = {
+  chuniProfileTopPlays: {
+    topPlays: userRatingBaseList[];
+  };
+};
+
+export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
+  chuniProfileTopPlays,
+}) => {
+  return (
+    <div className="grid grid-cols-1 gap-2 md:grid-cols-8">
+      {chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
+        const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
+          ".dds",
+          ".png",
+        );
+        return (
+          <div key={index} className="flex flex-col items-center p-2">
+            <div className="font-bold"></div>
+            {jacketPath && (
+              <img
+                src={`/JacketArt/${jacketPath}`}
+                alt="Jacket"
+                className="h-28 w-28"
+              />
+            )}
+            <ul className="mt-2 text-center">
+              <li>
+                <strong>Title: </strong> {chuniProfileTopPlays.title}
+              </li>
+              <li>
+                <strong>Level: </strong> {chuniProfileTopPlays.level}
+              </li>
+              <li>
+                <strong>Difficulty: </strong>{" "}
+                {getDifficultyText(Number(chuniProfileTopPlays.chartId))}
+              </li>
+              <li>
+                <strong>Score: </strong>{" "}
+                {chuniProfileTopPlays.score?.toLocaleString()}
+              </li>
+              <li>
+                <strong>Rating: </strong>{" "}
+                {(chuniProfileTopPlays.rating / 100).toFixed(2)}
+              </li>
+            </ul>
+          </div>
+        );
+      })}
+    </div>
+  );
+};