96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client";
|
|
import React, { FC, useState } from "react";
|
|
import { getDifficultyText } from "@/lib/helpers";
|
|
import { Skeleton } from "../ui/skeleton";
|
|
|
|
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",
|
|
);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const handleImageLoad = () => {
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const handleImageError = () => {
|
|
setIsLoading(false);
|
|
};
|
|
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={`mr-2 inline-block h-[100px] w-[100px] ${
|
|
isLoading ? "hidden" : ""
|
|
}`}
|
|
onLoad={handleImageLoad}
|
|
onError={handleImageError}
|
|
/>
|
|
{isLoading && (
|
|
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
|
)}
|
|
</>
|
|
)}
|
|
{!jacketPath && (
|
|
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
|
)}
|
|
<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>
|
|
);
|
|
};
|