95 lines
3.7 KiB
TypeScript
95 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import Image from "next/image"
|
|
import { ChevronLeft, ChevronRight } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface ProductGalleryProps {
|
|
images: string[]
|
|
productName: string
|
|
}
|
|
|
|
export function ProductGallery({ images, productName }: ProductGalleryProps) {
|
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
|
|
|
if (!images || images.length === 0) {
|
|
return (
|
|
<div className="relative aspect-square overflow-hidden rounded-xl border bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400">
|
|
Görsel Yok
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const nextImage = () => {
|
|
setSelectedIndex((prev) => (prev + 1) % images.length)
|
|
}
|
|
|
|
const prevImage = () => {
|
|
setSelectedIndex((prev) => (prev - 1 + images.length) % images.length)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Main Image */}
|
|
<div className="group relative aspect-square overflow-hidden rounded-xl border bg-slate-100 dark:bg-slate-800">
|
|
<Image
|
|
src={images[selectedIndex]}
|
|
alt={`${productName} - Görsel ${selectedIndex + 1}`}
|
|
fill
|
|
className="object-cover transition-all duration-300"
|
|
priority
|
|
/>
|
|
|
|
{/* Navigation Buttons (Only if multiple images) */}
|
|
{images.length > 1 && (
|
|
<>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute left-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white/80 hover:bg-white text-slate-800 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={prevImage}
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-white/80 hover:bg-white text-slate-800 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={nextImage}
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Thumbnails */}
|
|
{images.length > 1 && (
|
|
<div className="grid grid-cols-4 gap-4">
|
|
{images.map((img, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setSelectedIndex(idx)}
|
|
className={cn(
|
|
"relative aspect-square overflow-hidden rounded-lg border bg-slate-100 dark:bg-slate-800 transition-all ring-offset-2",
|
|
selectedIndex === idx
|
|
? "ring-2 ring-primary"
|
|
: "opacity-70 hover:opacity-100"
|
|
)}
|
|
>
|
|
<Image
|
|
src={img}
|
|
alt={`${productName} thumbnail ${idx + 1}`}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|