75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import Image from "next/image";
|
|
import { X } from "lucide-react";
|
|
|
|
export default function NewspaperClipping() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const close = useCallback(() => setOpen(false), []);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const handleKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") close();
|
|
};
|
|
document.addEventListener("keydown", handleKey);
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
document.removeEventListener("keydown", handleKey);
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [open, close]);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="aspect-[4/3] rounded-lg overflow-hidden bg-gray-100 shadow-xl border-l-8 border-[color:var(--brand)] cursor-pointer group relative"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<Image
|
|
src="/images/newspaper.webp"
|
|
alt="Budd Electric Co. featured in the local newspaper"
|
|
fill
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
className="object-contain p-3 group-hover:scale-105 transition-transform duration-300"
|
|
loading="lazy"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center">
|
|
<span className="text-white text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity bg-black/60 px-4 py-2 rounded">Click to enlarge</span>
|
|
</div>
|
|
</div>
|
|
<p className="mt-3 text-center text-sm text-gray-400 italic">Featured in the local press</p>
|
|
|
|
{open && (
|
|
<div
|
|
className="fixed inset-0 z-50 bg-black/85 flex items-center justify-center p-4 md:p-8"
|
|
onClick={close}
|
|
>
|
|
<button
|
|
onClick={close}
|
|
className="absolute top-4 right-4 text-white/80 hover:text-white transition-colors z-10"
|
|
aria-label="Close"
|
|
>
|
|
<X size={36} strokeWidth={2} />
|
|
</button>
|
|
<div
|
|
className="relative max-w-5xl w-full max-h-[90vh]"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Image
|
|
src="/images/newspaper.webp"
|
|
alt="Budd Electric Co. featured in the local newspaper"
|
|
width={1600}
|
|
height={1200}
|
|
className="object-contain w-full h-full max-h-[90vh]"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|