{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-hover-accordion",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/accordion/image-hover.tsx",
      "content": "'use client';\nimport { AnimatePresence, motion } from 'motion/react';\nimport type React from 'react';\nimport { type SetStateAction, useState } from 'react';\n\nexport const items = [\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\nconst article = {\n  hidden: { opacity: 0, y: 20 },\n  show: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      type: 'spring' as const,\n      stiffness: 100,\n      delayChildren: 0.2,\n      staggerChildren: 0.1, // Stagger duration for children\n    },\n  },\n};\n\ntype item = {\n  id: number;\n  url: string;\n  title: string;\n  description: string;\n  tags?: string[];\n};\ninterface GaleryProps {\n  items: item[];\n  setIndex: React.Dispatch<SetStateAction<number>>;\n  index: number | undefined;\n}\nfunction Gallery({ items, setIndex, index }: GaleryProps) {\n  return (\n    <div className='w-fit mx-auto gap-1 flex pb-20 pt-10 '>\n      {items.slice(0, 5).map((item: item, i: number) => {\n        return (\n          <motion.div\n            whileTap={{ scale: 0.95 }}\n            className={`rounded-xl relative ${\n              index === i ? 'w-[450px] ' : 'w-[50px]'\n            } h-[400px] shrink-0  transition-[width] ease-in-linear duration-500 origin-center  `}\n            key={item.id ?? item.title}\n            onClick={() => {\n              setIndex(i);\n            }}\n            onMouseEnter={() => {\n              setIndex(i);\n            }}\n          >\n            <motion.img\n              src={item?.url}\n              className={`${\n                index === i ? 'cursor-default' : 'cursor-pointer'\n              } w-full rounded-xl  h-full object-cover `}\n            />\n            <AnimatePresence mode='wait'>\n              {index === i && (\n                <motion.article\n                  variants={article}\n                  initial='hidden'\n                  animate='show'\n                  className='absolute flex rounded-xl  flex-col justify-end h-full top-0 p-3 space-y-2 overflow-hidden bg-linear-to-t dark:from-neutral-900/60 from-neutral-100/60  from-20% to-transparent to-80% '\n                >\n                  <motion.h1 variants={article} className='text-2xl font-semibold'>\n                    {item?.title}\n                  </motion.h1>\n                  <motion.p variants={article} className='leading-[120%]'>\n                    {item?.description}\n                  </motion.p>\n                </motion.article>\n              )}\n            </AnimatePresence>\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport default function SingleLayout() {\n  const [index, setIndex] = useState(2);\n\n  return (\n    <div className='relative'>\n      <Gallery items={items} index={index} setIndex={setIndex} />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}