add resource table separate icon component

src/components/ResourceTable.tsx

@@ -9,12 +9,50 @@ import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
 import { translateEnumPlatform, translateEnumSkill } from "~/utils/enumWordLut";
-import { type ChangeEvent } from "react";
+import { useEffect, type ChangeEvent, useState } from "react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { type ParsedUrlQuery, type ParsedUrlQueryInput } from "querystring";
 import { useRouter } from "next/router";
 import { PriceIcon } from "~/prices/Icons";
 
+export const ResourcePhoto = ({ resource }: { resource: AuditoryResource }) => {
+  const [blobSrc, setBlobSrc] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!resource.photo?.data) {
+      return;
+    }
+
+    const blob = new Blob([resource.photo.data], { type: "image/png" });
+    setBlobSrc(URL.createObjectURL(blob));
+  }, []);
+
+  const commonProps = {
+    width: 512,
+    height: 512,
+  };
+
+  if (resource.photo?.data) {
+    return (
+      <img
+        className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
+        src={blobSrc}
+        alt={`${resource.name} logo`}
+        {...commonProps}
+      />
+    );
+  }
+
+  return (
+    <Image
+      className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
+      src={`/resource_logos/${resource.icon}`}
+      alt={`${resource.name} logo`}
+      {...commonProps}
+    />
+  );
+};
+
 export const ResourceInfo = ({
   resource,
   showMoreInfo,
@@ -46,13 +84,7 @@ export const ResourceInfo = ({
         {showMoreInfo ? (
           <Link href={`resources/${resource.id}`}>
             <div className="flex w-20 flex-col justify-center space-y-2 sm:w-28">
-              <Image
-                className="w-full rounded-xl border border-neutral-400 bg-white drop-shadow-lg"
-                src={`/resource_logos/${resource.icon}`}
-                alt={`${resource.name} logo`}
-                width={512}
-                height={512}
-              />
+              <ResourcePhoto resource={resource} />
               <span className="block rounded-lg border border-neutral-900 bg-neutral-900 py-[1px] text-center text-white hover:bg-neutral-500 print:hidden">
                 more info
               </span>