From a313021c9e3b227d5ffbbd407f6a54a6e13ca82f Mon Sep 17 00:00:00 2001
From: Polaris <polaris@mail.com>
Date: Fri, 16 Aug 2024 22:00:51 -0400
Subject: [PATCH] changed list into grid

---
 app/(authenticated)/chunithm/page.tsx         |  4 +-
 components/userRatingBaseHotList/page.tsx     |  8 +--
 .../action.ts                                 |  0
 .../page.tsx                                  | 51 +++++++++----------
 4 files changed, 31 insertions(+), 32 deletions(-)
 rename components/{userRatingBase => userRatingBaseList}/action.ts (100%)
 rename components/{userRatingBase => userRatingBaseList}/page.tsx (52%)

diff --git a/app/(authenticated)/chunithm/page.tsx b/app/(authenticated)/chunithm/page.tsx
index ce6761d..fcb3731 100644
--- a/app/(authenticated)/chunithm/page.tsx
+++ b/app/(authenticated)/chunithm/page.tsx
@@ -13,10 +13,10 @@ import { getSystemVoices } from "@/components/(customization)/systemvoicecustomi
 import { SystemVoiceCustomization } from "@/components/(customization)/systemvoicecustomization/page";
 import { MapIconCustomization } from "@/components/(customization)/mapiconcustomization/page";
 import { getMapIcons } from "@/components/(customization)/mapiconcustomization/actions";
-import { getUserRatingBaseList } from "@/components/userRatingBase/action";
+import { getUserRatingBaseList } from "@/components/userRatingBaseList/action";
 import { ChunithmHotPlays } from "@/components/userRatingBaseHotList/page";
 import { getUserRatingBaseHotList } from "@/components/userRatingBaseHotList/action";
-import { ChunithmTopPlays } from "@/components/userRatingBase/page";
+import { ChunithmTopPlays } from "@/components/userRatingBaseList/page";
 
 const getChuniTopPlays = async () => {
   const topPlays = await getUserRatingBaseList();
diff --git a/components/userRatingBaseHotList/page.tsx b/components/userRatingBaseHotList/page.tsx
index 83ad86f..670d59c 100644
--- a/components/userRatingBaseHotList/page.tsx
+++ b/components/userRatingBaseHotList/page.tsx
@@ -25,15 +25,15 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
   chuniProfileHotPlays,
 }) => {
   return (
-    <div>
+    <div className="grid grid-cols-1 gap-2 md:grid-cols-8">
       {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>
+          <div key={index} className="flex flex-col items-center p-2">
+            <div className="m-4 font-bold"></div>
             {jacketPath && (
               <img
                 src={`/JacketArt/${jacketPath}`}
@@ -42,7 +42,7 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
               />
             )}
             <div>
-              <ul className="pl-2">
+              <ul className="mt-2 text-center">
                 <li>
                   <strong>Title: </strong> {playerHotRatingList.title}
                 </li>
diff --git a/components/userRatingBase/action.ts b/components/userRatingBaseList/action.ts
similarity index 100%
rename from components/userRatingBase/action.ts
rename to components/userRatingBaseList/action.ts
diff --git a/components/userRatingBase/page.tsx b/components/userRatingBaseList/page.tsx
similarity index 52%
rename from components/userRatingBase/page.tsx
rename to components/userRatingBaseList/page.tsx
index 436a96d..451b780 100644
--- a/components/userRatingBase/page.tsx
+++ b/components/userRatingBaseList/page.tsx
@@ -25,48 +25,47 @@ type chunithmTopPlays = {
     topPlays: userRatingBaseList[];
   };
 };
+
 export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
   chuniProfileTopPlays,
 }) => {
   return (
-    <div>
+    <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="center flex p-2">
-            <div className="m-4 font-bold">{index + 1}.</div>
+          <div key={index} className="flex flex-col items-center p-2">
+            <div className="font-bold"></div>
             {jacketPath && (
               <img
                 src={`/JacketArt/${jacketPath}`}
                 alt="Jacket"
-                style={{ width: "120px", height: "120px" }}
+                className="h-28 w-28"
               />
             )}
-            <div>
-              <ul className="pl-2">
-                <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>
+            <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>
         );
       })}