Gallery Grid with Lightbox

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { AnimatePresence, motion } from "framer-motion";
5import { ChevronLeft, ChevronRight, Grid, X, ZoomIn } from "lucide-react";
6import { KeyboardEvent, useState } from "react";
7 
8const galleryImages = [
9  {
10    id: 1,
11    url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500",
12    title: "Abstract Architecture",
13    category: "Architecture",
14  },
15  {
16    id: 2,
17    url: "https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=500",
18    title: "Modern Design",
19    category: "Design",
20  },
21  {
22    id: 3,
23    url: "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500",
24    title: "Urban Landscape",
25    category: "Nature",
26  },
27  {
28    id: 4,
29    url: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?w=500",
30    title: "Digital Art",
31    category: "Art",
32  },
33  {
34    id: 5,
35    url: "https://images.unsplash.com/photo-1618556450991-2f1af64e8191?w=500",
36    title: "Creative Space",
37    category: "Architecture",
38  },
39  {
40    id: 6,
41    url: "https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=500",
42    title: "Minimalist View",
43    category: "Design",
44  },
45];
46 
47export function GalleryGridBlockBaseui() {
48  const [selectedImage, setSelectedImage] = useState<number | null>(null);
49  const [filter, setFilter] = useState<string>("All");
50 
51  const categories = [
52    "All",
53    ...new Set(galleryImages.map((img) => img.category)),
54  ];
55 
56  const filteredImages =
57    filter === "All"
58      ? galleryImages
59      : galleryImages.filter((img) => img.category === filter);
60 
61  const handleNext = () => {
62    if (selectedImage !== null) {
63      const currentIndex = galleryImages.findIndex(
64        (img) => img.id === selectedImage
65      );
66      const nextIndex = (currentIndex + 1) % galleryImages.length;
67      setSelectedImage(galleryImages[nextIndex].id);
68    }
69  };
70 
71  const handlePrev = () => {
72    if (selectedImage !== null) {
73      const currentIndex = galleryImages.findIndex(
74        (img) => img.id === selectedImage
75      );
76      const prevIndex =
77        (currentIndex - 1 + galleryImages.length) % galleryImages.length;
78      setSelectedImage(galleryImages[prevIndex].id);
79    }
80  };
81 
82  const selectedImageData = galleryImages.find(
83    (img) => img.id === selectedImage
84  );
85 
86  const handleCardKeyDown = (
87    event: KeyboardEvent<HTMLDivElement>,
88    imageId: number
89  ) => {
90    if (event.key === "Enter" || event.key === " ") {
91// … truncated