reviews

frontend/style/components/image-gallery.tsx

@@ -0,0 +1,68 @@
+"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>
+  )
+}