changed tab bar to be mobile friendly and added next plays

components/userRatingBaseNextList/page.tsx

@@ -0,0 +1,72 @@
+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 = {
+  chuniProfileNextPlays: {
+    nextPlays: userRatingBaseList[];
+  };
+};
+export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
+  chuniProfileNextPlays,
+}) => {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
+      {" "}
+      {chuniProfileNextPlays.nextPlays.map((playerNextRatingList, index) => {
+        const jacketPath = playerNextRatingList.jacketPath?.replace(
+          ".dds",
+          ".png",
+        );
+        return (
+          <div key={index} className="flex flex-col items-center p-2">
+            <div className="font-bold"></div>
+            {jacketPath && (
+              <img
+                src={`/jacketArts/${jacketPath}`}
+                alt="Jacket"
+                className="h-28 w-28"
+              />
+            )}
+            <div>
+              <ul className="mt-2 text-center">
+                <li>
+                  <strong>Title: </strong> {playerNextRatingList.title}
+                </li>
+                <li>
+                  <strong>Level: </strong> {playerNextRatingList.level}
+                </li>
+                <li>
+                  <strong>Difficulty: </strong>
+                  {getDifficultyText(Number(playerNextRatingList.chartId))}
+                </li>
+                <li>
+                  <strong>Score: </strong>{" "}
+                  {playerNextRatingList.score?.toLocaleString()}
+                </li>
+                <li>
+                  <strong>Rating: </strong>{" "}
+                  {(playerNextRatingList.rating / 100).toFixed(2)}
+                </li>
+              </ul>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};