lightbox

components/home/GallerySection.tsx

@@ -1,13 +1,15 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Section, Container, Heading } from '../../components/ui';
 import Lightbox from '../Lightbox';
+import { useSearchParams } from 'next/navigation';
 
 export default function GallerySection() {
   const t = useTranslations('Home.gallery');
+  const searchParams = useSearchParams();
   const images = [
     '/uploads/2024/12/DSC07433-Large-600x400.webp',
     '/uploads/2024/12/DSC07460-Large-600x400.webp',
@@ -20,6 +22,17 @@ export default function GallerySection() {
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
 
+  useEffect(() => {
+    const photoParam = searchParams.get('photo');
+    if (photoParam !== null) {
+      const index = parseInt(photoParam, 10);
+      if (!isNaN(index) && index >= 0 && index < images.length) {
+        setLightboxIndex(index);
+        setLightboxOpen(true);
+      }
+    }
+  }, [searchParams, images.length]);
+
   return (
     <Section className="bg-white text-white py-32">
       <Container>