51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T1e6d,// @ts-nocheck 'use client'; import { AnimatePresence, AnimateSharedLayout, motion } from 'motion/react'; import Image from 'next/image'; import React, { useEffect, useState } from 'react'; export const itemsArr = [ { id: 1, url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format', title: 'Misty Mountain Majesty', description: 'A breathtaking view of misty mountains shrouded in clouds, creating an ethereal landscape.', tags: ['Misty', 'Mountains', 'Clouds', 'Ethereal', 'Landscape'], }, { id: 2, url: 'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format', title: 'Winter Wonderland', description: "A serene winter scene with snow-covered trees and mountains, showcasing nature's pristine beauty.", tags: ['Winter', 'Snow', 'Trees', 'Mountains', 'Serene'], }, { id: 3, url: 'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format', title: 'Autumn Mountain Retreat', description: 'A cozy cabin nestled in the mountains, surrounded by the vibrant colors of autumn foliage.', tags: ['Autumn', 'Cabin', 'Mountains', 'Foliage', 'Cozy'], }, { id: 4, url: 'https://images.unsplash.com/photo-1584043204475-8cc101d6c77a?q=80&w=1200&auto=format', title: 'Tranquil Lake Reflection', description: 'A calm mountain lake perfectly reflecting the surrounding peaks and sky, creating a mirror-like surface.', tags: ['Lake', 'Reflection', 'Mountains', 'Tranquil', 'Mirror'], }, { id: 5, url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format', title: 'Misty Mountain Peaks', description: "Majestic mountain peaks emerging from a sea of clouds, showcasing nature's grandeur.", tags: ['Misty', 'Peaks', 'Clouds', 'Majestic', 'Nature'], }, { id: 6, url: 'https://images.unsplash.com/photo-1518599904199-0ca897819ddb?q=80&w=1200&auto=format', title: 'Golden Hour Glow', description: 'A stunning mountain landscape bathed in the warm light of the golden hour, highlighting every contour.', tags: ['Golden Hour', 'Mountains', 'Landscape', 'Warm', 'Scenic'], }, { id: 7, url: 'https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format', title: 'Snowy Mountain Highway', description: 'A winding road cutting through a snowy mountain landscape, inviting adventure and exploration.', tags: ['Snow', 'Road', 'Mountains', 'Winter', 'Adventure'], }, { id: 8, url: 'https://images.unsplash.com/photo-1709949908219-fd9046282019?q=80&w=1200&auto=format', title: 'Foggy Mountain Forest', description: 'A mysterious and enchanting forest shrouded in fog, with mountains looming in the background.', tags: ['Fog', 'Forest', 'Mountains', 'Mysterious', 'Enchanting'], }, { id: 9, url: 'https://images.unsplash.com/photo-1508873881324-c92a3fc536ba?q=80&w=1200&auto=format', title: 'Sunset Mountain Silhouette', description: 'A dramatic silhouette of mountain peaks against a vibrant sunset sky, creating a stunning contrast.', tags: ['Sunset', 'Silhouette', 'Mountains', 'Dramatic', 'Sky'], }, { id: 10, url: 'https://images.unsplash.com/photo-1462989856370-729a9c1e2c91?q=80&w=1200&auto=format', title: 'Alpine Meadow Bliss', description: 'A lush alpine meadow dotted with wildflowers, set against a backdrop of towering mountain peaks.', tags: ['Alpine', 'Meadow', 'Wildflowers', 'Mountains', 'Peaceful'], }, { id: 11, url: 'https://images.unsplash.com/photo-1475727946784-2890c8fdb9c8?q=80&w=1200&auto=format', title: 'Mountain Lake Serenity', description: 'A serene mountain lake surrounded by pine forests, reflecting the calm beauty of the wilderness.', tags: ['Lake', 'Mountains', 'Forest', 'Reflection', 'Serenity'], }, ]; function Gallery({ items, setIndex, setOpen, index, }: { items: typeof itemsArr; setIndex: (index: number) => void; setOpen: (open: boolean) => void; index: number; }) { return (

{items.slice(0, 11).map((item, i) => { return ( <> { setIndex(i); }} onMouseLeave={() => { setIndex(i); }} onClick={() => { setIndex(i); setOpen(true); }} src={item?.url} layoutId={item.id} /> ); })}

); } export default function AccordionModal() { const [index, setIndex] = useState(5); const [open, setOpen] = useState(false); useEffect(() => { if (open) { document.body.classList.add('overflow-hidden'); } else { document.body.classList.remove('overflow-hidden'); } const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { setOpen(false); } }; document.addEventListener('keydown', handleKeyDown); return () => { document.removeEventListener('keydown', handleKeyDown); }; }, [open]); return (

{open !== false && ( { setOpen(false); }} >

e.stopPropagation()}> single-image

{itemsArr[index].title} {itemsArr[index].description}

)}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@ui-layouts","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"./registry/components/modal/gallery-modal/accordion-modal.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]