83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { Mountain } from "lucide-react";
|
|
|
|
interface TripImage {
|
|
id: string;
|
|
url: string;
|
|
caption: string | null;
|
|
}
|
|
|
|
export function ImageGallery({ images }: { images: TripImage[] }) {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
if (images.length === 0) {
|
|
return (
|
|
<div className="flex h-44 items-center justify-center bg-neutral-100 sm:h-56 lg:h-72">
|
|
<Mountain
|
|
size={56}
|
|
strokeWidth={1.5}
|
|
aria-hidden
|
|
className="text-neutral-300"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const activeImage = images[activeIndex];
|
|
|
|
return (
|
|
<div>
|
|
{/* Main Image */}
|
|
<div className="relative h-44 bg-neutral-900 sm:h-56 lg:h-72">
|
|
<Image
|
|
src={activeImage.url}
|
|
alt={activeImage.caption || "Foto trip"}
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 768px"
|
|
priority
|
|
/>
|
|
{activeImage.caption && (
|
|
<div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 sm:px-4 sm:pb-3 sm:pt-8">
|
|
<p className="text-xs font-medium text-white sm:text-sm">
|
|
{activeImage.caption}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{/* Counter */}
|
|
<div className="absolute right-2 top-2 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm sm:right-3 sm:top-3 sm:px-2.5 sm:py-1 sm:text-xs">
|
|
{activeIndex + 1} / {images.length}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Thumbnails */}
|
|
{images.length > 1 && (
|
|
<div className="flex gap-1 overflow-x-auto bg-neutral-100 p-1.5 sm:gap-1.5 sm:p-2">
|
|
{images.map((img, i) => (
|
|
<button
|
|
key={img.id}
|
|
onClick={() => setActiveIndex(i)}
|
|
className={`relative h-11 w-16 shrink-0 overflow-hidden rounded-md transition-all sm:h-14 sm:w-20 sm:rounded-lg ${
|
|
i === activeIndex
|
|
? "ring-2 ring-primary-500 ring-offset-1"
|
|
: "opacity-60 hover:opacity-100"
|
|
}`}
|
|
>
|
|
<Image
|
|
src={img.url}
|
|
alt={img.caption || `Foto ${i + 1}`}
|
|
fill
|
|
className="object-cover"
|
|
sizes="80px"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|