68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "./ui/button"
|
|
|
|
interface ImageGalleryProps {
|
|
images: string[]
|
|
}
|
|
|
|
export function ImageGallery({ images }: ImageGalleryProps) {
|
|
// Check if images is undefined or not an array
|
|
if (!images || !Array.isArray(images)) {
|
|
console.error('Images prop is undefined or not an array:', images);
|
|
return <div>Error: No images provided</div>;
|
|
}
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
const goToPrevious = () => {
|
|
setCurrentIndex((prevIndex) => (prevIndex === 0 ? images.length - 1 : prevIndex - 1))
|
|
}
|
|
|
|
const goToNext = () => {
|
|
setCurrentIndex((prevIndex) => (prevIndex === images.length - 1 ? 0 : prevIndex + 1))
|
|
}
|
|
|
|
return (
|
|
<div className="relative aspect-square">
|
|
<div className="absolute inset-0 overflow-hidden rounded-lg">
|
|
<Image
|
|
src={images[currentIndex] || "/placeholder.svg"}
|
|
alt={`Product image ${currentIndex + 1}`}
|
|
width={500}
|
|
height={500}
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
priority={currentIndex === 0}
|
|
/>
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="absolute left-2 top-1/2 transform -translate-y-1/2"
|
|
onClick={goToPrevious}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="absolute right-2 top-1/2 transform -translate-y-1/2"
|
|
onClick={goToNext}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex justify-center space-x-2">
|
|
{images.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
className={`h-2 w-2 rounded-full ${index === currentIndex ? "bg-blue-600" : "bg-gray-300"}`}
|
|
onClick={() => setCurrentIndex(index)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |