{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-modal-accordion",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/modal/gallery-modal/accordion-modal.tsx",
      "content": "// @ts-nocheck\n'use client';\nimport { AnimatePresence, AnimateSharedLayout, motion } from 'motion/react';\nimport Image from 'next/image';\nimport React, { useEffect, useState } from 'react';\n\nexport const itemsArr = [\n  {\n    id: 1,\n    url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n    title: 'Misty Mountain Majesty',\n    description:\n      'A breathtaking view of misty mountains shrouded in clouds, creating an ethereal landscape.',\n    tags: ['Misty', 'Mountains', 'Clouds', 'Ethereal', 'Landscape'],\n  },\n  {\n    id: 2,\n    url: 'https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1200&auto=format',\n    title: 'Winter Wonderland',\n    description:\n      \"A serene winter scene with snow-covered trees and mountains, showcasing nature's pristine beauty.\",\n    tags: ['Winter', 'Snow', 'Trees', 'Mountains', 'Serene'],\n  },\n  {\n    id: 3,\n    url: 'https://images.unsplash.com/photo-1693581176773-a5f2362209e6?q=80&w=1200&auto=format',\n    title: 'Autumn Mountain Retreat',\n    description:\n      'A cozy cabin nestled in the mountains, surrounded by the vibrant colors of autumn foliage.',\n    tags: ['Autumn', 'Cabin', 'Mountains', 'Foliage', 'Cozy'],\n  },\n  {\n    id: 4,\n    url: 'https://images.unsplash.com/photo-1584043204475-8cc101d6c77a?q=80&w=1200&auto=format',\n    title: 'Tranquil Lake Reflection',\n    description:\n      'A calm mountain lake perfectly reflecting the surrounding peaks and sky, creating a mirror-like surface.',\n    tags: ['Lake', 'Reflection', 'Mountains', 'Tranquil', 'Mirror'],\n  },\n  {\n    id: 5,\n    url: 'https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1200&auto=format',\n    title: 'Misty Mountain Peaks',\n    description:\n      \"Majestic mountain peaks emerging from a sea of clouds, showcasing nature's grandeur.\",\n    tags: ['Misty', 'Peaks', 'Clouds', 'Majestic', 'Nature'],\n  },\n  {\n    id: 6,\n    url: 'https://images.unsplash.com/photo-1518599904199-0ca897819ddb?q=80&w=1200&auto=format',\n    title: 'Golden Hour Glow',\n    description:\n      'A stunning mountain landscape bathed in the warm light of the golden hour, highlighting every contour.',\n    tags: ['Golden Hour', 'Mountains', 'Landscape', 'Warm', 'Scenic'],\n  },\n  {\n    id: 7,\n    url: 'https://images.unsplash.com/photo-1706049379414-437ec3a54e93?q=80&w=1200&auto=format',\n    title: 'Snowy Mountain Highway',\n    description:\n      'A winding road cutting through a snowy mountain landscape, inviting adventure and exploration.',\n    tags: ['Snow', 'Road', 'Mountains', 'Winter', 'Adventure'],\n  },\n  {\n    id: 8,\n    url: 'https://images.unsplash.com/photo-1709949908219-fd9046282019?q=80&w=1200&auto=format',\n    title: 'Foggy Mountain Forest',\n    description:\n      'A mysterious and enchanting forest shrouded in fog, with mountains looming in the background.',\n    tags: ['Fog', 'Forest', 'Mountains', 'Mysterious', 'Enchanting'],\n  },\n  {\n    id: 9,\n    url: 'https://images.unsplash.com/photo-1508873881324-c92a3fc536ba?q=80&w=1200&auto=format',\n    title: 'Sunset Mountain Silhouette',\n    description:\n      'A dramatic silhouette of mountain peaks against a vibrant sunset sky, creating a stunning contrast.',\n    tags: ['Sunset', 'Silhouette', 'Mountains', 'Dramatic', 'Sky'],\n  },\n  {\n    id: 10,\n    url: 'https://images.unsplash.com/photo-1462989856370-729a9c1e2c91?q=80&w=1200&auto=format',\n    title: 'Alpine Meadow Bliss',\n    description:\n      'A lush alpine meadow dotted with wildflowers, set against a backdrop of towering mountain peaks.',\n    tags: ['Alpine', 'Meadow', 'Wildflowers', 'Mountains', 'Peaceful'],\n  },\n  {\n    id: 11,\n    url: 'https://images.unsplash.com/photo-1475727946784-2890c8fdb9c8?q=80&w=1200&auto=format',\n    title: 'Mountain Lake Serenity',\n    description:\n      'A serene mountain lake surrounded by pine forests, reflecting the calm beauty of the wilderness.',\n    tags: ['Lake', 'Mountains', 'Forest', 'Reflection', 'Serenity'],\n  },\n];\n\nfunction Gallery({\n  items,\n  setIndex,\n  setOpen,\n  index,\n}: {\n  items: typeof itemsArr;\n  setIndex: (index: number) => void;\n  setOpen: (open: boolean) => void;\n  index: number;\n}) {\n  return (\n    <div className='rounded-md w-fit mx-auto md:gap-2 gap-1 flex pb-20 pt-10 '>\n      {items.slice(0, 11).map((item, i) => {\n        return (\n          <>\n            <motion.img\n              whileTap={{ scale: 0.95 }}\n              className={`rounded-2xl ${\n                index === i ? 'w-[250px] ' : 'xl:w-[50px] md:w-[30px] sm:w-[20px] w-[14px]'\n              } h-[200px] shrink-0  object-cover transition-[width] ease-in-out duration-300`}\n              key={item}\n              onMouseEnter={() => {\n                setIndex(i);\n              }}\n              onMouseLeave={() => {\n                setIndex(i);\n              }}\n              onClick={() => {\n                setIndex(i);\n                setOpen(true);\n              }}\n              src={item?.url}\n              layoutId={item.id}\n            />\n          </>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default function AccordionModal() {\n  const [index, setIndex] = useState(5);\n  const [open, setOpen] = useState(false);\n  useEffect(() => {\n    if (open) {\n      document.body.classList.add('overflow-hidden');\n    } else {\n      document.body.classList.remove('overflow-hidden');\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [open]);\n  return (\n    <div className='relative'>\n      <Gallery items={itemsArr} index={index} setIndex={setIndex} setOpen={setOpen} />\n      <AnimatePresence>\n        {open !== false && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            key='overlay'\n            className='dark:bg-black/40 bg-white/40 backdrop-blur-lg fixed inset-0 z-50 top-0 left-0 bottom-0 right-0 w-full h-full grid place-content-center'\n            onClick={() => {\n              setOpen(false);\n            }}\n          >\n            <div onClick={(e) => e.stopPropagation()}>\n              <motion.div\n                layoutId={itemsArr[index].id}\n                className='w-[400px] h-[400px] rounded-2xl relative cursor-default overflow-hidden'\n              >\n                <Image\n                  src={itemsArr[index].url}\n                  width={400}\n                  height={400}\n                  alt='single-image'\n                  className='rounded-2xl h-full w-full object-cover'\n                />\n                <article className='dark:bg-black/40 bg-white/40 backdrop-blur-md absolute -bottom-1 left-0 w-full rounded-md p-2'>\n                  <motion.h1\n                    initial={{ scaleY: 0.2 }}\n                    animate={{ scaleY: 1 }}\n                    exit={{ scaleY: 0.2 }}\n                    transition={{ duration: 0.2, delay: 0.2 }}\n                    className='text-xl font-semibold'\n                  >\n                    {itemsArr[index].title}\n                  </motion.h1>\n                  <motion.p\n                    initial={{ y: -10, opacity: 0 }}\n                    animate={{ y: 0, opacity: 1 }}\n                    exit={{ scaleY: -10, opacity: 0 }}\n                    transition={{ duration: 0.2, delay: 0.2 }}\n                    className='text-sm leading-[100%] py-2'\n                  >\n                    {itemsArr[index].description}\n                  </motion.p>\n                </article>\n              </motion.div>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}