'use client'; import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'; import { createUrl } from 'lib/utils'; import Link from 'next-intl/link'; import Image from 'next/image'; import { usePathname, useSearchParams } from 'next/navigation'; export function Gallery({ images }: { images: { src: string; alt: string }[] }) { const pathname = usePathname(); const searchParams = useSearchParams(); const imageSearchParam = searchParams.get('image'); const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0; const nextSearchParams = new URLSearchParams(searchParams.toString()); const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0; nextSearchParams.set('image', nextImageIndex.toString()); const nextUrl = createUrl(pathname, nextSearchParams); const previousSearchParams = new URLSearchParams(searchParams.toString()); const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1; previousSearchParams.set('image', previousImageIndex.toString()); const previousUrl = createUrl(pathname, previousSearchParams); const buttonClassName = 'h-12 w-12 transition-all ease-in-out hover:scale-110 flex items-center justify-center'; return ( <>
{images[imageIndex] && ( {images[imageIndex]?.alt )} {images.length > 1 ? (
) : null}
); }