Expandable Gallery

1"use client";
2 
3import { motion, AnimatePresence, LayoutGroup } from "motion/react";
4import React, { useState, useId, useRef } from "react";
5import { useOutsideClick } from "@/hooks/use-outside-click";
6import Image from "next/image";
7import { Button } from "@/components/ui/button";
8import { ArrowLeft01Icon, ArrowRight01Icon } from "@hugeicons/core-free-icons";
9import { HugeiconsIcon } from "@hugeicons/react";
10import { cn } from "@/lib/utils";
11 
12// Change Here
13const PHOTOS = [
14  {
15    id: "photo-1",
16 
17    src: "https://images.unsplash.com/photo-1755398104393-746e52af4a9f?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mzd8fHxlbnwwfHx8fHw%3D?q=80&w=800",
18    alt: "Technology setup",
19    rotation: -15,
20    x: -90,
21    y: 10,
22    zIndex: 10,
23  },
24  {
25    id: "photo-2",
26    src: "https://images.unsplash.com/photo-1756764099214-b09a5666914b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTB8fHxlbnwwfHx8fHw%3D?q=80&w=800",
27    alt: "Design research",
28    rotation: -3,
29    x: -10,
30    y: -15,
31    zIndex: 20,
32  },
33  {
34    id: "photo-3",
35    src: "https://images.unsplash.com/photo-1757372429884-92e02350c5d9?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjJ8fHxlbnwwfHx8fHw%3D?q=80&w=800",
36    alt: "Code and development",
37    rotation: 12,
38    x: 75,
39    y: 5,
40    zIndex: 30,
41  },
42  {
43    id: "photo-4",
44    src: "https://images.unsplash.com/photo-1756993399574-2fa126269ce7?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8NzR8fHxlbnwwfHx8fHw%3D?q=80&w=800",
45    alt: "Dashboard interface",
46  },
47  {
48    id: "photo-5",
49    src: "https://images.unsplash.com/photo-1756990637536-714b76296a30?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8ODJ8fHxlbnwwfHx8fHw%3D?q=80&w=800",
50    alt: "Product design",
51  },
52  {
53    id: "photo-6",
54    src: "https://images.unsplash.com/photo-1756838197413-07f174def66c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTA0fHx8ZW58MHx8fHx8?q=80&w=800",
55    alt: "Laptop on desk",
56  },
57  {
58    id: "photo-7",
59    src: "https://images.unsplash.com/photo-1756310406492-3ce3bef447aa?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTQwfHx8ZW58MHx8fHx8?q=80&w=800",
60    alt: "Team collaboration",
61  },
62  {
63    id: "photo-8",
64// … truncated