changed jacket art rendering into a functional component

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]" />
-            ) : (
-              <img
-                src={`/jacketArts/${jacketPath}`}
-                alt="Jacket"
-                className="mr-2 inline-block h-[100px] w-[100px]"
-              />
-            )}
+
+            <ImageCell
+              jacketPath={playerHotRatingList.jacketPath!}
+              title={playerHotRatingList.title!}
+            />
+
             <div>
               <ul className="mt-2 text-center">
                 <li>