43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
type Props = {
|
|
images: string[];
|
|
alt: string;
|
|
};
|
|
|
|
export default function CoffeeDetailGallery({ images, alt }: Props) {
|
|
const [index, setIndex] = useState(0);
|
|
const safeImages = images.length > 0 ? images : [''];
|
|
const current = safeImages[index] || '';
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="relative h-72 sm:h-96 overflow-hidden rounded-2xl border border-slate-200 bg-slate-100">
|
|
{current ? (
|
|
<img src={current} alt={alt} className="h-full w-full object-cover" />
|
|
) : (
|
|
<div className="h-full w-full flex items-center justify-center text-sm text-slate-400">No image available</div>
|
|
)}
|
|
</div>
|
|
|
|
{safeImages.length > 1 && (
|
|
<div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
|
|
{safeImages.map((img, i) => (
|
|
<button
|
|
key={`${img}-${i}`}
|
|
type="button"
|
|
onClick={() => setIndex(i)}
|
|
className={`relative h-16 sm:h-20 overflow-hidden rounded-xl border transition ${
|
|
i === index ? 'border-slate-900 ring-2 ring-slate-900/20' : 'border-slate-200 hover:border-slate-300'
|
|
}`}
|
|
aria-label={`Show gallery image ${i + 1}`}
|
|
>
|
|
<img src={img} alt={`${alt} ${i + 1}`} className="h-full w-full object-cover" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|