Refactor galleries and single page

src/components/artworks/ArtworkThumbGallery.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import Image from "next/image";
-import Link from "next/link";
 import React from "react";
+import { ArtworkImageCard } from "./ArtworkImageCard";
 
 type ArtworkGalleryItem = {
   id: string;
@@ -77,37 +76,36 @@ export default function ArtworkThumbGallery({
 
         return (
           <div key={a.id} className="w-full" style={tileStyle}>
-            <div className="relative h-full w-full overflow-hidden rounded-md border">
-              <Link href={`${hrefBase}/single/${a.id}`} className="block h-full w-full">
-                <Image
-                  src={`/api/image/thumbnail/${a.file.fileKey}.webp`}
-                  alt={a.altText ?? a.name ?? "Artwork"}
-                  fill
-                  className="object-cover"
-                  loading="lazy"
-                  sizes="(min-width: 1280px) 20vw, (min-width: 1024px) 25vw, (min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
-                />
-              </Link>
+            <div className="relative h-full w-full">
+              <ArtworkImageCard
+                mode="tile"
+                href={`${hrefBase}/single/${a.id}?from=animal-studies`}
+                src={`/api/image/thumbnail/${a.file.fileKey}.webp`}
+                alt={a.altText ?? a.name ?? "Artwork"}
+                width={a.metadata?.width ?? 0}
+                height={a.metadata?.height ?? 0}
+                aspectRatio={`${w} / ${h}`}
+                className="h-full w-full rounded-md"
+                imageClassName="object-cover"
+                sizes="(min-width: 1280px) 20vw, (min-width: 1024px) 25vw, (min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
+              />
 
-              {/* Title overlay */}
+              {/* Title overlay (restored) */}
               <div
                 className={cn(
-                  "absolute left-0 right-0 top-0 px-3 py-2",
+                  "pointer-events-none absolute left-0 right-0 top-0 px-3 py-2",
                   bgClass,
                   "backdrop-blur-[1px]"
                 )}
               >
-                <div className={cn("truncate text-sm font-medium", textClass)}>
-                  {a.name}
-                </div>
+                <div className={cn("truncate text-sm font-medium", textClass)}>{a.name}</div>
               </div>
 
-              {/* Bottom button bar (reserved space) */}
+              {/* Bottom reserved bar (if you need it later) */}
               <div
                 className="absolute left-0 right-0 bottom-0 z-20 flex items-center justify-between px-2"
                 style={{ height: BUTTON_BAR_HEIGHT }}
-              >
-              </div>
+              />
             </div>
           </div>
         );