100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { X, Maximize2 } from 'lucide-react';
|
|
|
|
interface LightboxImageProps {
|
|
src: string;
|
|
alt: string;
|
|
position?: string;
|
|
zoom?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export default function LightboxImage({
|
|
src,
|
|
alt,
|
|
position = "50% 50%",
|
|
zoom = 1,
|
|
className = "w-full h-full object-cover"
|
|
}: LightboxImageProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
// Close on Escape key
|
|
useEffect(() => {
|
|
const handleEsc = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') setIsOpen(false);
|
|
};
|
|
window.addEventListener('keydown', handleEsc);
|
|
return () => window.removeEventListener('keydown', handleEsc);
|
|
}, []);
|
|
|
|
// Prevent scroll when open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden';
|
|
} else {
|
|
document.body.style.overflow = 'unset';
|
|
}
|
|
return () => { document.body.style.overflow = 'unset'; };
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="relative group cursor-zoom-in w-full h-full overflow-hidden"
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className={className}
|
|
style={{
|
|
objectPosition: position,
|
|
transform: `scale(${zoom})`,
|
|
transformOrigin: position
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all flex items-center justify-center opacity-0 group-hover:opacity-100">
|
|
<div className="bg-white/20 backdrop-blur-md p-3 rounded-full text-white scale-90 group-hover:scale-100 transition-all">
|
|
<Maximize2 className="w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Lightbox Overlay */}
|
|
{isOpen && (
|
|
<div
|
|
className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center p-4 md:p-12 animate-in fade-in duration-300"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
<button
|
|
className="absolute top-6 right-6 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors z-[10000]"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsOpen(false);
|
|
}}
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
|
|
<div
|
|
className="relative w-full h-full flex items-center justify-center cursor-zoom-out"
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className="max-w-full max-h-full object-contain shadow-2xl animate-in zoom-in-95 duration-300"
|
|
/>
|
|
|
|
{/* Legend / Caption */}
|
|
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent text-white text-center">
|
|
<p className="text-lg font-medium">{alt}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|