59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ProductImage {
|
|
url: string;
|
|
altText?: string;
|
|
}
|
|
|
|
interface ProductDetailGalleryProps {
|
|
images: ProductImage[];
|
|
selectedImageIndex: number;
|
|
onImageChange: (index: number) => void;
|
|
}
|
|
|
|
const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({ images, selectedImageIndex, onImageChange }) => {
|
|
|
|
return (
|
|
<div>
|
|
{/* Main Image */}
|
|
<div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
|
|
{images.length > 0 ? (
|
|
<img
|
|
src={images[selectedImageIndex].url}
|
|
alt={images[selectedImageIndex].altText || 'Product image'}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-gray-400">
|
|
<i className="ri-image-line text-6xl"></i>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Image Thumbnails */}
|
|
{images.length > 1 && (
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{images.map((image, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => onImageChange(index)}
|
|
className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
|
|
selectedImageIndex === index
|
|
? 'border-black'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<img
|
|
src={image.url}
|
|
alt={image.altText || 'Product thumbnail'}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductDetailGallery; |