{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-modal-unsplash",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/modal/gallery-modal/unsplash-modal.tsx",
      "content": "// inspired by tom is loading\n'use client';\nimport { items } from '@/components/website/constant';\nimport { Download, X } from 'lucide-react';\nimport { AnimatePresence, motion, useInView } from 'motion/react';\nimport Image from 'next/image';\nimport React, { useEffect, useRef, useState } from 'react';\n\nfunction UnsplashGrid() {\n  const [selected, setSelected] = useState(null);\n\n  return (\n    <>\n      <div className='container mx-auto sm:p-4 px-0 '>\n        <div className='columns-2 md:columns-3 2xl:columns-4 gap-4'>\n          <>\n            {items.slice(5, 14)?.map((item, index) => (\n              <ImageItem key={item.id} item={item} index={index} setSelected={setSelected} />\n            ))}\n          </>\n        </div>\n      </div>\n      <Modal selected={selected} setSelected={setSelected} />\n    </>\n  );\n}\ninterface Item {\n  id: number;\n  url: string;\n  title: string;\n}\n\ninterface ImageItemProps {\n  item: Item;\n  index: number | string;\n  setSelected: any;\n}\n\nfunction ImageItem({ item, index, setSelected }: ImageItemProps) {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: true });\n\n  return (\n    <motion.figure\n      initial='hidden'\n      animate={isInView && 'visible'}\n      ref={ref}\n      className=\"inline-block group w-full rounded-md  relative dark:bg-black bg-white  before:absolute before:top-0 before:content-[''] before:h-full before:w-full hover:before:bg-linear-to-t dark:before:from-neutral-900  before:from-neutral-200/90 before:from-5% before:to-transparent before:to-90% cursor-pointer\"\n      onClick={() => setSelected(item)}\n    >\n      <motion.img\n        layoutId={`card-${item.id}`}\n        whileHover={{ scale: 1.025 }}\n        src={item.url}\n        className='w-full bg-base-100 shadow-xl image-full cursor-pointer'\n      />\n      <div className='flex flex-wrap mt-2 absolute bottom-0 left-0 p-2 group-hover:opacity-100 opacity-0 font-semibold '>\n        <h1>{item.title}</h1>\n      </div>\n    </motion.figure>\n  );\n}\n\ninterface ItemType {\n  id: number;\n  url: string;\n  title: string;\n  tags: any[];\n  description: string;\n}\n\ninterface ModalProps {\n  selected: ItemType | null;\n  setSelected: any;\n}\nfunction Modal({ selected, setSelected }: ModalProps) {\n  const itemVariants = {\n    initial: {\n      opacity: 0,\n      y: 10,\n    },\n    animate: {\n      opacity: 1,\n      y: 0,\n      transition: {\n        duration: 0.3,\n        staggerChildren: 0.2, // Adjust the stagger delay as needed\n      },\n    },\n    exit: {\n      opacity: 0,\n      y: 20,\n    },\n  };\n  useEffect(() => {\n    if (selected) {\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        setSelected(false);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [selected]);\n  return (\n    <AnimatePresence>\n      {selected && (\n        <motion.div\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          onClick={() => setSelected(null)}\n          className='fixed inset-0 bg-black/50 backdrop-blur-xs z-50 cursor-pointer overflow-y-scroll'\n        >\n          <motion.div\n            onClick={(e) => e.stopPropagation()}\n            layoutId={`card-${selected.id}`}\n            className='w-full max-w-[1000px] relative overflow-x-hidden mx-auto my-8 cursor-default dark:bg-[#202020] bg-[#ebebeb] '\n          >\n            <button\n              className='absolute top-2 right-2  p-2 mix-blend-multiply'\n              onClick={() => setSelected(null)}\n            >\n              <X />\n            </button>\n            <motion.div className=' p-2 h-[70vh]  rounded-md'>\n              <Image\n                width={400}\n                height={400}\n                alt='img'\n                src={selected.url}\n                className='w-full h-full object-contain rounded-md dark:bg-black bg-white'\n              />\n            </motion.div>\n            <motion.div\n              variants={itemVariants}\n              initial='initial'\n              animate='animate'\n              exit='exit'\n              className='bg-white dark:bg-black dark:text-white text-black p-4  rounded-md  px-8'\n            >\n              <motion.h3 variants={itemVariants} className='text-2xl font-bold mb-2'>\n                {selected.title}\n              </motion.h3>\n              <motion.div variants={itemVariants} className='flex gap-2'>\n                {selected.tags.map((tag) => {\n                  return (\n                    <div\n                      className='bg-base-300 border  dark:bg-neutral-100 bg-neutral-50 text-zinc-600 px-2 py-1 rounded-md'\n                      key={tag}\n                    >\n                      {tag}\n                    </div>\n                  );\n                })}\n              </motion.div>\n              <motion.p variants={itemVariants} className='my-4'>\n                {selected.description}\n              </motion.p>\n              <motion.a\n                variants={itemVariants}\n                className='flex  w-fit gap-2 cursor-pointer px-4 py-2 dark:hover:bg-black bg-black hover:bg-white hover:text-black text-white border-black dark:hover:text-white transition-colors border-2 dark:border-white dark:bg-white dark:text-black rounded-full font-semibold'\n                href='#'\n              >\n                Download\n                <Download />\n              </motion.a>\n            </motion.div>\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\nexport default UnsplashGrid;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}