Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.quebec/private_html/src/components/ui/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React, { useEffect } from 'react';
import Image from 'next/image';
import { X } from 'lucide-react';

interface ImageModalProps {
  isOpen: boolean;
  onClose: () => void;
  imageSrc: string;
  imageAlt: string;
  title?: string;
}

export default function ImageModal({ isOpen, onClose, imageSrc, imageAlt, title }: ImageModalProps) {
  // Close modal on escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
      // Prevent body scroll when modal is open
      document.body.style.overflow = 'hidden';
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
      document.body.style.overflow = 'unset';
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black bg-opacity-75 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* Modal Content */}
      <div className="relative w-full max-w-4xl max-h-[90vh] mx-auto">
        {/* Close Button - Mobile Friendly */}
        <button
          onClick={onClose}
          className="absolute -top-12 right-0 md:-top-16 md:right-0 text-white hover:text-gray-300 transition-colors z-10 p-2 rounded-full bg-black/20 backdrop-blur-sm"
          aria-label="Close modal"
        >
          <X size={24} className="md:w-8 md:h-8" />
        </button>
        
        {/* Image Container */}
        <div className="relative bg-white rounded-lg overflow-hidden shadow-2xl max-h-[85vh] md:max-h-[80vh]">
          {title && (
            <div className="px-4 py-3 md:px-6 md:py-4 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
              <h3 className="text-lg md:text-xl font-semibold truncate">{title}</h3>
            </div>
          )}
          
          <div className="p-2 md:p-4 flex items-center justify-center bg-gray-50">
            <div className="relative w-full h-full flex items-center justify-center">
              <Image
                src={imageSrc}
                alt={imageAlt}
                width={800}
                height={600}
                className="max-w-full max-h-[70vh] md:max-h-[60vh] w-auto h-auto object-contain rounded-lg"
                style={{ objectFit: 'contain' }}
                priority
              />
            </div>
          </div>
          
          {/* Mobile-friendly close area */}
          <div className="md:hidden p-4 bg-gray-100 text-center">
            <button
              onClick={onClose}
              className="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
            >
              Fermer
            </button>
          </div>
        </div>
        
        {/* Swipe indicator for mobile */}
        <div className="md:hidden text-center mt-4">
          <p className="text-white/70 text-sm">Appuyez en dehors de l'image pour fermer</p>
        </div>
      </div>
    </div>
  );
}