changed list into grid

This commit is contained in:
Polaris 2024-08-16 22:00:51 -04:00
parent 4f728b8c4e
commit a313021c9e
4 changed files with 31 additions and 32 deletions

View File

@ -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();

View File

@ -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>

View File

@ -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>
);
})}