fix upload image trip
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { Mountain } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Mountain, Maximize2, X, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
|
||||
interface TripImage {
|
||||
id: string;
|
||||
@@ -12,6 +12,38 @@ interface TripImage {
|
||||
|
||||
export function ImageGallery({ images }: { images: TripImage[] }) {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||||
const hasMultiple = images.length > 1;
|
||||
|
||||
function showPrev() {
|
||||
setActiveIndex((i) => (i - 1 + images.length) % images.length);
|
||||
}
|
||||
function showNext() {
|
||||
setActiveIndex((i) => (i + 1) % images.length);
|
||||
}
|
||||
|
||||
// Saat lightbox terbuka: kunci scroll body + dukung keyboard (Esc tutup,
|
||||
// panah kiri/kanan untuk ganti foto).
|
||||
useEffect(() => {
|
||||
if (!lightboxOpen) return;
|
||||
function onKey(e: KeyboardEvent) {
|
||||
// Logika prev/next di-inline (bukan panggil showPrev/showNext) supaya
|
||||
// effect tidak bergantung pada fungsi yang dibuat ulang tiap render.
|
||||
if (e.key === "Escape") setLightboxOpen(false);
|
||||
else if (e.key === "ArrowLeft") {
|
||||
setActiveIndex((i) => (i - 1 + images.length) % images.length);
|
||||
} else if (e.key === "ArrowRight") {
|
||||
setActiveIndex((i) => (i + 1) % images.length);
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKey);
|
||||
const prevOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKey);
|
||||
document.body.style.overflow = prevOverflow;
|
||||
};
|
||||
}, [lightboxOpen, images.length]);
|
||||
|
||||
if (images.length === 0) {
|
||||
return (
|
||||
@@ -30,18 +62,25 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Main Image */}
|
||||
<div className="relative h-44 bg-neutral-900 sm:h-56 lg:h-72">
|
||||
{/* Main Image — klik untuk lihat ukuran penuh */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLightboxOpen(true)}
|
||||
aria-label="Lihat foto ukuran penuh"
|
||||
className="group relative block h-44 w-full cursor-zoom-in bg-neutral-900 sm:h-56 lg:h-72"
|
||||
>
|
||||
<Image
|
||||
src={activeImage.url}
|
||||
alt={activeImage.caption || "Foto trip"}
|
||||
fill
|
||||
className="object-cover"
|
||||
// `object-contain` — tampilkan gambar utuh tanpa terpotong; rasio
|
||||
// foto bebas, sisi yang tak terisi jadi bar gelap (bg-neutral-900).
|
||||
className="object-contain"
|
||||
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">
|
||||
<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 text-left sm:px-4 sm:pb-3 sm:pt-8">
|
||||
<p className="text-xs font-medium text-white sm:text-sm">
|
||||
{activeImage.caption}
|
||||
</p>
|
||||
@@ -51,14 +90,20 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
|
||||
<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>
|
||||
{/* Petunjuk perbesar */}
|
||||
<span className="absolute left-2 top-2 inline-flex items-center gap-1 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm transition-colors group-hover:bg-black/70 sm:left-3 sm:top-3 sm:px-2.5 sm:py-1 sm:text-xs">
|
||||
<Maximize2 size={11} strokeWidth={2} aria-hidden />
|
||||
Lihat penuh
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Thumbnails */}
|
||||
{images.length > 1 && (
|
||||
{hasMultiple && (
|
||||
<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}
|
||||
type="button"
|
||||
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
|
||||
@@ -77,6 +122,111 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Lightbox — penampil foto ukuran penuh */}
|
||||
{lightboxOpen && (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Penampil foto trip"
|
||||
className="fixed inset-0 z-50 flex flex-col bg-black/95"
|
||||
>
|
||||
{/* Top bar */}
|
||||
<div className="flex items-center justify-between px-4 py-3 text-white">
|
||||
<span className="text-sm font-medium tabular-nums">
|
||||
{activeIndex + 1} / {images.length}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLightboxOpen(false)}
|
||||
aria-label="Tutup"
|
||||
className="flex h-9 w-9 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20"
|
||||
>
|
||||
<X size={20} strokeWidth={2} aria-hidden />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Area gambar — klik latar untuk menutup */}
|
||||
<div
|
||||
className="relative flex-1"
|
||||
onClick={() => setLightboxOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="relative h-full w-full"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Image
|
||||
src={activeImage.url}
|
||||
alt={activeImage.caption || "Foto trip"}
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="100vw"
|
||||
quality={90}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{hasMultiple && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
showPrev();
|
||||
}}
|
||||
aria-label="Foto sebelumnya"
|
||||
className="absolute left-2 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/25 sm:left-4"
|
||||
>
|
||||
<ChevronLeft size={24} strokeWidth={2} aria-hidden />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
showNext();
|
||||
}}
|
||||
aria-label="Foto berikutnya"
|
||||
className="absolute right-2 top-1/2 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/25 sm:right-4"
|
||||
>
|
||||
<ChevronRight size={24} strokeWidth={2} aria-hidden />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{activeImage.caption && (
|
||||
<p className="px-4 py-3 text-center text-sm text-white/80">
|
||||
{activeImage.caption}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Thumbnail strip di dalam lightbox */}
|
||||
{hasMultiple && (
|
||||
<div className="flex justify-center gap-1.5 overflow-x-auto px-4 pb-4">
|
||||
{images.map((img, i) => (
|
||||
<button
|
||||
key={img.id}
|
||||
type="button"
|
||||
onClick={() => setActiveIndex(i)}
|
||||
aria-label={`Lihat foto ${i + 1}`}
|
||||
className={`relative h-12 w-16 shrink-0 overflow-hidden rounded-md transition-all ${
|
||||
i === activeIndex
|
||||
? "ring-2 ring-primary-400 ring-offset-1 ring-offset-black"
|
||||
: "opacity-50 hover:opacity-100"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={img.url}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="64px"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user