changed jacket art rendering into a functional component

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;