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

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