77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import { useState } from "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-linear-to-br from-primary-800 to-secondary-900 sm:h-56 lg:h-72">
|
||
<span className="text-5xl sm:text-6xl">🏔️</span>
|
||
</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>
|
||
);
|
||
}
|