changed jacket art rendering into a functional component

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">
-          {jacketPath ? (
-            <img
-              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>
+        <ImageCell
+          jacketPath={row.original.jacketPath!}
+          title={row.original.title!}
+        />
       );
     },
   },