"use client";
import { useEffect, useRef, useState } from "react";
// "Filmstrip click-to-preview + lightbox fade" animation identity — scoped
// with a unique `al-gallery09-*` prefix so this never collides with
// another Resource's own animation layer when copied standalone. This is
// the same canonical source shown in the Code tab's Tailwind CSS view.
// Disabled entirely under reduced motion: outside its `@media` query the
// lightbox still opens/closes functionally, just without the fade/scale.
import "./Gallery09.tailwind.css";
const IMAGES = [
    {
        src: "https://images.unsplash.com/photo-1746365591179-057259af2796?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1746365591179-057259af2796?q=80&w=1600&auto=format&fit=crop",
        alt: "Portrait with patterned geometric face art under moody blue-teal studio lighting",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 2000,
        category: "Editorial",
        title: "Geometric portrait",
    },
    {
        src: "https://images.unsplash.com/photo-1760235128025-d0631be78bce?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1760235128025-d0631be78bce?q=80&w=1600&auto=format&fit=crop",
        alt: "Curved, wave-like architectural panels in grayscale with rhythmic light and shadow",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 1000,
        category: "Interior",
        title: "Wave panels",
    },
    {
        src: "https://images.unsplash.com/photo-1758873268745-dd2cf0d677b5?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1758873268745-dd2cf0d677b5?q=80&w=1600&auto=format&fit=crop",
        alt: "Colleagues collaborating around a laptop in a bright open-plan office",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 1000,
        category: "Workspace",
        title: "Team session",
    },
    {
        src: "https://images.unsplash.com/photo-1757528148166-1bb1ac63adc4?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1757528148166-1bb1ac63adc4?q=80&w=1600&auto=format&fit=crop",
        alt: "Calm blue ocean stretching to the horizon under a clear sky",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 1000,
        category: "Landscape",
        title: "Still water",
    },
    {
        src: "https://images.unsplash.com/photo-1553484771-371a605b060b?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1553484771-371a605b060b?q=80&w=1600&auto=format&fit=crop",
        alt: "Hands holding an open magazine-style report with a colorful circular diagram",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 1000,
        category: "Product",
        title: "Report layout",
    },
    {
        src: "https://images.unsplash.com/photo-1505495693567-59239d461e9f?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1505495693567-59239d461e9f?q=80&w=1600&auto=format&fit=crop",
        alt: "Person making direct eye contact with the camera in warm backlit outdoor light",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 2000,
        category: "Editorial",
        title: "Backlit gaze",
    },
    {
        src: "https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?q=80&w=500&auto=format&fit=crop",
        fullSrc: "https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?q=80&w=1600&auto=format&fit=crop",
        alt: "Dark, moody dual-monitor setup with code editors glowing in a dim room",
        width: 500,
        height: 620,
        fullWidth: 1600,
        fullHeight: 1000,
        category: "Workspace",
        title: "Late build",
    },
];
function CloseIcon() {
    return (<svg className="size-5" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <path d="M4.5 4.5l9 9M13.5 4.5l-9 9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>);
}
function ArrowIcon({ direction }) {
    return (<svg className="size-4.5" viewBox="0 0 18 18" fill="none" aria-hidden="true">
      <path d={direction === "left" ? "M11.25 4.5 6 9l5.25 4.5" : "M6.75 4.5 12 9l-5.25 4.5"} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>);
}
/**
 * Gallery 09 — filmstrip gallery with a modal lightbox preview. Every
 * thumbnail is a real button; clicking one opens a proper dialog
 * (`role="dialog"`, `aria-modal`, a real focus trap, background scroll
 * locked while open) showing the image full-size with its own prev/next
 * navigation. Escape closes it and returns focus to the thumbnail that
 * opened it; clicking the backdrop closes it too.
 */
function Gallery09() {
    const [openIndex, setOpenIndex] = useState(null);
    const triggerRefs = useRef([]);
    const closeButtonRef = useRef(null);
    const panelRef = useRef(null);
    const isOpen = openIndex !== null;
    useEffect(() => {
        if (!isOpen)
            return;
        const triggerToRefocus = openIndex !== null ? triggerRefs.current[openIndex] : null;
        closeButtonRef.current?.focus();
        document.body.style.overflow = "hidden";
        function handleKeyDown(event) {
            if (event.key === "Escape") {
                setOpenIndex(null);
                return;
            }
            if (event.key === "ArrowLeft") {
                setOpenIndex((current) => (current === null ? current : (current - 1 + IMAGES.length) % IMAGES.length));
                return;
            }
            if (event.key === "ArrowRight") {
                setOpenIndex((current) => (current === null ? current : (current + 1) % IMAGES.length));
                return;
            }
            if (event.key !== "Tab" || !panelRef.current)
                return;
            const focusable = panelRef.current.querySelectorAll('a[href], button:not([disabled])');
            if (focusable.length === 0)
                return;
            const first = focusable[0];
            const last = focusable[focusable.length - 1];
            if (event.shiftKey && document.activeElement === first) {
                event.preventDefault();
                last.focus();
            }
            else if (!event.shiftKey && document.activeElement === last) {
                event.preventDefault();
                first.focus();
            }
        }
        document.addEventListener("keydown", handleKeyDown);
        return () => {
            document.removeEventListener("keydown", handleKeyDown);
            document.body.style.overflow = "";
            triggerToRefocus?.focus();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isOpen]);
    const active = openIndex !== null ? IMAGES[openIndex] : null;
    return (<section aria-label="Filmstrip gallery" className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
      <div className="mx-auto w-full max-w-6xl">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-[clamp(1.75rem,1.4rem+1.8vw,2.5rem)] font-semibold tracking-tight text-neutral-900">
            Ship Your Website Quickly with ALEXY LINK
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-neutral-500 sm:text-base">
            Use prebuilt templates and components for a professional, stunning look.
          </p>
        </div>

        <div className="mt-10 flex gap-3 overflow-x-auto pb-2 sm:gap-4 lg:mt-14 lg:grid lg:grid-cols-7 lg:overflow-visible">
          {IMAGES.map((image, index) => (<button key={image.src} type="button" ref={(el) => {
                triggerRefs.current[index] = el;
            }} onClick={() => setOpenIndex(index)} aria-label={`Open "${image.title}" preview`} className="al-gallery09-frame relative h-40 w-32 shrink-0 overflow-hidden rounded-xl bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#39FF14] sm:h-48 sm:w-40 lg:h-auto lg:w-full lg:shrink lg:aspect-4/5">
              <img src={image.src} alt={image.alt} width={image.width} height={image.height} loading="lazy" decoding="async" className="h-full w-full object-cover"/>
            </button>))}
        </div>
      </div>

      {isOpen && active && (<div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
          <div className="al-gallery09-overlay absolute inset-0 bg-black/80" aria-hidden="true" onClick={() => setOpenIndex(null)}/>
          <div ref={panelRef} role="dialog" aria-modal="true" aria-label={`${active.title} — enlarged preview`} className="al-gallery09-panel relative flex max-h-full w-full max-w-3xl flex-col overflow-hidden rounded-2xl bg-neutral-950">
            <img key={active.src} src={active.fullSrc} alt={active.alt} width={active.fullWidth} height={active.fullHeight} className="max-h-[70vh] w-full object-contain"/>
            <div className="flex items-center justify-between gap-4 border-t border-white/10 px-5 py-4">
              <div>
                <p className="text-sm font-medium text-white">{active.title}</p>
                <p className="text-[11px] font-medium tracking-wide text-white/50 uppercase">{active.category}</p>
              </div>
              <p className="text-xs text-white/40">
                {openIndex + 1} / {IMAGES.length}
              </p>
            </div>

            <button ref={closeButtonRef} type="button" onClick={() => setOpenIndex(null)} aria-label="Close preview" className="absolute top-3 right-3 inline-flex size-9 items-center justify-center rounded-full bg-black/40 text-white transition-colors hover:bg-black/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#39FF14]">
              <CloseIcon />
            </button>
            <button type="button" onClick={() => setOpenIndex((current) => (current === null ? current : (current - 1 + IMAGES.length) % IMAGES.length))} aria-label="Previous image" className="absolute top-1/2 left-3 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-white transition-colors hover:bg-black/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#39FF14]">
              <ArrowIcon direction="left"/>
            </button>
            <button type="button" onClick={() => setOpenIndex((current) => (current === null ? current : (current + 1) % IMAGES.length))} aria-label="Next image" className="absolute top-1/2 right-3 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-white transition-colors hover:bg-black/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#39FF14]">
              <ArrowIcon direction="right"/>
            </button>
          </div>
        </div>)}
    </section>);
}
export { Gallery09 };
Gallery 09

Requirements

Dependencies

Usage
