Gallery Grid with Lightbox

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