Initial commit: Shopify storefront Next.js template

Next.js 16 + React 19 storefront template with Shopify Storefront API integration, Tailwind v4, and shadcn/ui components. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0111qSr3KopyGRsJ6LznR1xZ
2026-07-31 22:12:19 -04:00
commit e3d5e75299
69 changed files with 7960 additions and 0 deletions
@@ -0,0 +1,64 @@
+import React from 'react';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductDetailGalleryProps {
+  images: ProductImage[];
+  selectedImageIndex?: number;
+  onImageSelect?: (index: number) => void;
+}
+
+const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
+  images,
+  selectedImageIndex = 0,
+  onImageSelect,
+}) => {
+  const setSelectedImage = onImageSelect || (() => {});
+
+  return (
+    <div className="space-y-4">
+      {/* Main Image */}
+      <div className="product-gallery-main aspect-square bg-zinc-50 border border-border rounded-3xl overflow-hidden shadow-inner relative">
+        {images.length > 0 ? (
+          <img
+            src={images[selectedImageIndex].url}
+            alt={images[selectedImageIndex].altText || 'Product image'}
+            className="w-full h-full object-cover transition-all hover:scale-105 duration-700"
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
+            <i className="ri-image-line text-[120px]"></i>
+          </div>
+        )}
+      </div>
+
+      {/* Image Thumbnails */}
+      {images.length > 1 && (
+        <div className="grid grid-cols-4 gap-3">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={() => setSelectedImage(index)}
+              className={`aspect-square rounded-2xl overflow-hidden border transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/30 ${
+                selectedImageIndex === index
+                  ? 'border-primary shadow-md scale-[1.03]'
+                  : 'border-border hover:border-zinc-300'
+              }`}
+            >
+              <img
+                src={image.url}
+                alt={image.altText || 'Product thumbnail'}
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductDetailGallery;