changed jacket art rendering into a functional component

.eslintrc.json

@@ -1,3 +1,6 @@
 {
+  "rules": {
+    "@next/next/no-img-element": "off"
+  },
   "extends": "next/core-web-vitals"
 }

components/scoreplaylog/colums.tsx

@@ -2,13 +2,12 @@
 
 import { ColumnDef } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
 import { ArrowUpDown } from "lucide-react";
 import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
 import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
 import { getDifficultyText, getGrade } from "@/lib/helpers";
-import { Skeleton } from "../ui/skeleton";
 import ActionsCell from "./moreAction";
+import ImageCell from "./image";
 type chunithm = chuni_score_playlog &
   chuni_static_music & { playCount: number };
 
@@ -18,32 +17,11 @@ export const columns: ColumnDef<chunithm>[] = [
     header: "Title",
 
     cell: ({ row }) => {
-      const [isLoading, setIsLoading] = useState(true);
-      const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
-      const handleImageLoad = () => {
-        setIsLoading(false);
-      };
-
-      const handleImageError = () => {
-        setIsLoading(false);
-      };
       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>
       );
     },
   },

components/scoreplaylog/image.tsx

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

components/userRatingBaseHotList/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
 import { getDifficultyText } from "@/lib/helpers";
 import { Skeleton } from "../ui/skeleton";
+import ImageCell from "../scoreplaylog/image";
 
 type userRatingBaseList = {
   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">
       {" "}
       {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 (
           <div key={index} className="flex flex-col items-center p-2">
             <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>
               <ul className="mt-2 text-center">
                 <li>

components/userRatingBaseList/page.tsx

@@ -2,6 +2,7 @@
 import React, { FC, useState } from "react";
 import { getDifficultyText } from "@/lib/helpers";
 import { Skeleton } from "../ui/skeleton";
+import ImageCell from "../scoreplaylog/image";
 
 type userRatingBaseList = {
   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">
       {" "}
       {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 (
           <div key={index} className="flex flex-col items-center p-2">
             <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">
               <li>
                 <strong>Title: </strong> {chuniProfileTopPlays.title}

components/userRatingBaseNextList/page.tsx

@@ -2,6 +2,7 @@
 import React, { FC, useState } from "react";
 import { getDifficultyText } from "@/lib/helpers";
 import { Skeleton } from "../ui/skeleton";
+import ImageCell from "../scoreplaylog/image";
 
 type userRatingBaseList = {
   title: string;
@@ -34,31 +35,14 @@ export const ChunithmNextPlays: FC<ChunithmProfileHotPlays> = ({
           ".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 ? (
+            <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>
               <ul className="mt-2 text-center">
                 <li>