changed jacket art rendering into a functional component
This commit is contained in:
@ -1,3 +1,6 @@
|
|||||||
{
|
{
|
||||||
|
"rules": {
|
||||||
|
"@next/next/no-img-element": "off"
|
||||||
|
},
|
||||||
"extends": "next/core-web-vitals"
|
"extends": "next/core-web-vitals"
|
||||||
}
|
}
|
||||||
|
@ -2,13 +2,12 @@
|
|||||||
|
|
||||||
import { ColumnDef } from "@tanstack/react-table";
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { useState } from "react";
|
|
||||||
import { ArrowUpDown } from "lucide-react";
|
import { ArrowUpDown } from "lucide-react";
|
||||||
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
||||||
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
||||||
import { getDifficultyText, getGrade } from "@/lib/helpers";
|
import { getDifficultyText, getGrade } from "@/lib/helpers";
|
||||||
import { Skeleton } from "../ui/skeleton";
|
|
||||||
import ActionsCell from "./moreAction";
|
import ActionsCell from "./moreAction";
|
||||||
|
import ImageCell from "./image";
|
||||||
type chunithm = chuni_score_playlog &
|
type chunithm = chuni_score_playlog &
|
||||||
chuni_static_music & { playCount: number };
|
chuni_static_music & { playCount: number };
|
||||||
|
|
||||||
@ -18,32 +17,11 @@ export const columns: ColumnDef<chunithm>[] = [
|
|||||||
header: "Title",
|
header: "Title",
|
||||||
|
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
|
||||||
const handleImageLoad = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImageError = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<div className="flex w-[300px] items-center truncate font-medium">
|
<ImageCell
|
||||||
{jacketPath ? (
|
jacketPath={row.original.jacketPath!}
|
||||||
<img
|
title={row.original.title!}
|
||||||
src={`/JacketArts/${jacketPath}`}
|
/>
|
||||||
alt="Jacket"
|
|
||||||
className={`mr-2 inline-block h-[70px] w-[70px] ${
|
|
||||||
isLoading ? "hidden" : ""
|
|
||||||
}`}
|
|
||||||
onLoad={handleImageLoad}
|
|
||||||
onError={handleImageError}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Skeleton className="mr-2 inline-block h-8 w-8" />
|
|
||||||
)}
|
|
||||||
<span className="truncate">{row.original.title}</span>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
41
components/scoreplaylog/image.tsx
Normal file
41
components/scoreplaylog/image.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
"use client";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Skeleton } from "../ui/skeleton";
|
||||||
|
|
||||||
|
interface ImageCellProps {
|
||||||
|
jacketPath: string | undefined;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ImageCell: React.FC<ImageCellProps> = ({ jacketPath, title }) => {
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
|
||||||
|
const handleImageLoad = () => {
|
||||||
|
setIsLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageError = () => {
|
||||||
|
setIsLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const formattedJacketPath = jacketPath?.replace(".dds", ".png");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-[100px] w-[100px]">
|
||||||
|
{formattedJacketPath ? (
|
||||||
|
<img
|
||||||
|
src={`/JacketArts/${formattedJacketPath}`}
|
||||||
|
alt="Jacket"
|
||||||
|
className={`${isLoading ? "hidden" : ""}`}
|
||||||
|
onLoad={handleImageLoad}
|
||||||
|
onError={handleImageError}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Skeleton className="mr-2 inline-block h-8 w-8" />
|
||||||
|
)}
|
||||||
|
<span className="truncate">{title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ImageCell;
|
@ -1,8 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import React, { FC, useState } from "react";
|
import React, { FC } from "react";
|
||||||
import { getDifficultyText } from "@/lib/helpers";
|
import { getDifficultyText } from "@/lib/helpers";
|
||||||
import { Skeleton } from "../ui/skeleton";
|
import { Skeleton } from "../ui/skeleton";
|
||||||
|
import ImageCell from "../scoreplaylog/image";
|
||||||
|
|
||||||
type userRatingBaseList = {
|
type userRatingBaseList = {
|
||||||
title: string;
|
title: string;
|
||||||
@ -31,31 +32,15 @@ export const ChunithmHotPlays: FC<ChunithmProfileHotPlays> = ({
|
|||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
||||||
{" "}
|
{" "}
|
||||||
{chuniProfileHotPlays.hotRating.map((playerHotRatingList, index) => {
|
{chuniProfileHotPlays.hotRating.map((playerHotRatingList, index) => {
|
||||||
const jacketPath = playerHotRatingList.jacketPath?.replace(
|
|
||||||
".dds",
|
|
||||||
".png",
|
|
||||||
);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
|
|
||||||
const handleImageLoad = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImageError = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<div key={index} className="flex flex-col items-center p-2">
|
<div key={index} className="flex flex-col items-center p-2">
|
||||||
<div className="font-bold"></div>
|
<div className="font-bold"></div>
|
||||||
{!jacketPath ? (
|
|
||||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
<ImageCell
|
||||||
) : (
|
jacketPath={playerHotRatingList.jacketPath!}
|
||||||
<img
|
title={playerHotRatingList.title!}
|
||||||
src={`/jacketArts/${jacketPath}`}
|
/>
|
||||||
alt="Jacket"
|
|
||||||
className="mr-2 inline-block h-[100px] w-[100px]"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<div>
|
<div>
|
||||||
<ul className="mt-2 text-center">
|
<ul className="mt-2 text-center">
|
||||||
<li>
|
<li>
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
import React, { FC, useState } from "react";
|
import React, { FC, useState } from "react";
|
||||||
import { getDifficultyText } from "@/lib/helpers";
|
import { getDifficultyText } from "@/lib/helpers";
|
||||||
import { Skeleton } from "../ui/skeleton";
|
import { Skeleton } from "../ui/skeleton";
|
||||||
|
import ImageCell from "../scoreplaylog/image";
|
||||||
|
|
||||||
type userRatingBaseList = {
|
type userRatingBaseList = {
|
||||||
title: string;
|
title: string;
|
||||||
@ -31,35 +32,13 @@ export const ChunithmTopPlays: FC<chunithmTopPlays> = ({
|
|||||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
|
||||||
{" "}
|
{" "}
|
||||||
{chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
|
{chuniProfileTopPlays.topPlays.map((chuniProfileTopPlays, index) => {
|
||||||
const jacketPath = chuniProfileTopPlays.jacketPath?.replace(
|
|
||||||
".dds",
|
|
||||||
".png",
|
|
||||||
);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
|
|
||||||
const handleImageLoad = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImageError = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<div key={index} className="flex flex-col items-center p-2">
|
<div key={index} className="flex flex-col items-center p-2">
|
||||||
<div className="font-bold"></div>
|
<div className="font-bold"></div>
|
||||||
{jacketPath ? (
|
<ImageCell
|
||||||
<img
|
jacketPath={chuniProfileTopPlays.jacketPath!}
|
||||||
src={`/jacketArts/${jacketPath}`}
|
title={chuniProfileTopPlays.title!}
|
||||||
alt="Jacket"
|
/>
|
||||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
|
||||||
isLoading ? "hidden" : ""
|
|
||||||
}`}
|
|
||||||
onLoad={handleImageLoad}
|
|
||||||
onError={handleImageError}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
|
||||||
)}
|
|
||||||
<ul className="mt-2 text-center">
|
<ul className="mt-2 text-center">
|
||||||
<li>
|
<li>
|
||||||
<strong>Title: </strong> {chuniProfileTopPlays.title}
|
<strong>Title: </strong> {chuniProfileTopPlays.title}
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
import React, { FC, useState } from "react";
|
import React, { FC, useState } from "react";
|
||||||
import { getDifficultyText } from "@/lib/helpers";
|
import { getDifficultyText } from "@/lib/helpers";
|
||||||
import { Skeleton } from "../ui/skeleton";
|
import { Skeleton } from "../ui/skeleton";
|
||||||
|
import ImageCell from "../scoreplaylog/image";
|
||||||
|
|
||||||
type userRatingBaseList = {
|
type userRatingBaseList = {
|
||||||
title: string;
|
title: string;
|
||||||
@ -34,31 +35,14 @@ export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
|
|||||||
".dds",
|
".dds",
|
||||||
".png",
|
".png",
|
||||||
);
|
);
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
|
|
||||||
const handleImageLoad = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImageError = () => {
|
|
||||||
setIsLoading(false);
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<div key={index} className="flex flex-col items-center p-2">
|
<div key={index} className="flex flex-col items-center p-2">
|
||||||
<div className="font-bold"></div>
|
<div className="font-bold"></div>
|
||||||
{jacketPath ? (
|
<ImageCell
|
||||||
<img
|
jacketPath={playerNextRatingList.jacketPath!}
|
||||||
src={`/jacketArts/${jacketPath}`}
|
title={playerNextRatingList.title!}
|
||||||
alt="Jacket"
|
/>
|
||||||
className={`mr-2 inline-block h-[100px] w-[100px] ${
|
|
||||||
isLoading ? "hidden" : ""
|
|
||||||
}`}
|
|
||||||
onLoad={handleImageLoad}
|
|
||||||
onError={handleImageError}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Skeleton className="mr-2 inline-block h-[100px] w-[100px]" />
|
|
||||||
)}
|
|
||||||
<div>
|
<div>
|
||||||
<ul className="mt-2 text-center">
|
<ul className="mt-2 text-center">
|
||||||
<li>
|
<li>
|
||||||
|
Reference in New Issue
Block a user