image-lightbox.tsx

1'use client'
2
3import { motion, AnimatePresence } from 'framer-motion'
4import Image from 'next/image'
5
6interface ImageLightboxProps {
7	src: string
8	alt: string
9	onClose: () => void
10}
11
12export function ImageLightbox({ src, alt, onClose }: ImageLightboxProps) {
13	return (
14		<AnimatePresence>
15			<motion.div
16				initial={{ opacity: 0 }}
17				animate={{ opacity: 1 }}
18				exit={{ opacity: 0 }}
19				className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
20				onClick={onClose}
21			>
22				<motion.div
23					initial={{ scale: 0.9, opacity: 0 }}
24					animate={{ scale: 1, opacity: 1 }}
25					exit={{ scale: 0.9, opacity: 0 }}
26					className="relative max-h-[90vh] max-w-[90vw]"
27					onClick={(e) => e.stopPropagation()}
28				>
29					<button
30						onClick={onClose}
31						className="absolute -right-4 -top-4 rounded-full bg-gray-800 p-2 text-white hover:bg-gray-700"
32					>
33						<svg
34							xmlns="http://www.w3.org/2000/svg"
35							className="h-6 w-6"
36							fill="none"
37							viewBox="0 0 24 24"
38							stroke="currentColor"
39						>
40							<path
41								strokeLinecap="round"
42								strokeLinejoin="round"
43								strokeWidth={2}
44								d="M6 18L18 6M6 6l12 12"
45							/>
46						</svg>
47					</button>
48					<Image
49						src={src}
50						alt={alt}
51						width={1200}
52						height={800}
53						className="h-auto max-h-[90vh] w-auto rounded-lg object-contain"
54					/>
55				</motion.div>
56			</motion.div>
57		</AnimatePresence>
58	)
59}
60