chore: transfer repo

components/product/ProductGallery.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Image as ImageType } from 'lib/shopify/types';
+import Image from 'next/image';
+import { useState } from 'react';
+
+interface ProductGalleryProps {
+  images: ImageType[];
+}
+
+export function ProductGallery({ images = [] }: ProductGalleryProps) {
+  const [selectedImage, setSelectedImage] = useState(0);
+
+  if (!images.length) {
+    return (
+      <div className="aspect-square w-full bg-gray-100 flex items-center justify-center">
+        <p className="text-gray-500">No image available</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row gap-3 md:items-start pt-5 w-full overflow-hidden">
+      {/* Thumbnails */}
+      <div className="order-2 md:order-1 flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[600px] md:w-16 flex-shrink-0">
+        {images.map((image, index) => (
+          <button
+            key={`${image.url}-${index}`}
+            className={`relative h-14 w-14 flex-shrink-0 overflow-hidden border ${
+              selectedImage === index ? 'border-black' : 'border-gray-200'
+            }`}
+            onClick={() => setSelectedImage(index)}
+            aria-label={`View image ${index + 1} of ${images.length}`}
+          >
+            <Image
+              src={image.url}
+              alt={image.altText || ''}
+              fill
+              className="object-cover"
+              sizes="56px"
+            />
+          </button>
+        ))}
+      </div>
+
+      {/* Main image */}
+      <div className="order-1 md:order-2 relative w-full h-[500px] md:h-[550px] flex-grow overflow-hidden">
+        <div className="w-full h-full relative">
+          {images[selectedImage] && (
+            <img
+              src={images[selectedImage].url}
+              alt={images[selectedImage].altText || ''}
+              className="w-full h-full object-cover object-top"
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}