60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
'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>
|
|
);
|
|
}
|