{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-modal-slider",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/modal/gallery-modal/modal-slider.tsx",
      "content": "// @ts-nocheck\n'use client';\n\nimport { items } from '@/components/website/constant';\nimport { X } from 'lucide-react';\nimport { AnimatePresence, LayoutGroup, motion, useMotionValue } from 'motion/react';\nimport type { StaticImport } from 'next/dist/shared/lib/get-img-props';\nimport Image from 'next/image';\nimport React, { useEffect, useRef, useState } from 'react';\n\ntype ImageModalProps = {\n  item: any;\n  uniqueId: string;\n  itemArr: any;\n};\n\nconst modal: React.FC = () => {\n  return (\n    <>\n      <div className='columns-3 '>\n        {items.slice(0, 8)?.map((item, index) => (\n          <SliderModal\n            key={item.id ?? item.url}\n            item={item}\n            itemArr={items}\n            uniqueId={`id-${index}`}\n          />\n        ))}\n      </div>\n    </>\n  );\n};\n\nexport const SliderModal = ({ item, uniqueId, itemArr }: ImageModalProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [newItem, setNewItem] = useState(item);\n  const [hight, setHight] = useState(0);\n  const [constraints, setConstraints] = useState(0);\n  const carousel = useRef(null);\n\n  useEffect(() => {\n    const element = carousel.current;\n    const viewportHeight = element?.offsetHeight;\n    const viewScrollHeight = element?.scrollHeight;\n    // console.log(viewportHeight, viewScrollHeight);\n    setConstraints(Number(viewportHeight) - Number(viewScrollHeight));\n  }, [carousel, isOpen]);\n  // console.log(constraints)\n  useEffect(() => {\n    if (isOpen) {\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        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen]);\n\n  return (\n    <>\n      <motion.div\n        onClick={() => {\n          setIsOpen(true);\n          setNewItem(item);\n        }}\n        className='overflow-hidden mb-3'\n      >\n        <motion.div layoutId={uniqueId}>\n          <Image\n            width={400}\n            height={400}\n            src={item?.url}\n            className='bg-white text-black rounded-md w-full cursor-zoom-in'\n            alt='img'\n          />\n        </motion.div>\n      </motion.div>\n\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            className='fixed inset-0 z-50 top-0 left-0  right-0 bottom-0  flex flex-col items-center w-full h-screen justify-center dark:bg-black/80 bg-neutral-300/80 backdrop-blur-lg cursor-zoom-out'\n            onClick={() => {\n              setNewItem(null);\n              setIsOpen(false);\n            }}\n          >\n            <button\n              className='absolute top-2 right-2 p-4 border dark:bg-black/80 text-white  bg-neutral-400/40 backdrop-blur-lg '\n              onClick={() => setIsOpen(false)}\n            >\n              <X />\n            </button>\n            <motion.div\n              layoutId={uniqueId}\n              className='rounded-md w-fit h-[80%] flex gap-2 items-center mx-auto cursor-auto '\n              onClick={(e) => e.stopPropagation()}\n            >\n              {newItem && (\n                <AnimatePresence>\n                  {itemArr.map((tab: any, index: React.Key | null | undefined) => (\n                    <>\n                      <React.Fragment key={item.id ?? item.url}>\n                        <AnimatePresence mode='popLayout'>\n                          {tab.id === newItem.id && (\n                            <motion.figure\n                              key={tab?.id}\n                              className='dark:bg-neutral-900/40 bg-neutral-100/40 border  rounded-md p-4'\n                            >\n                              <motion.div\n                                initial={{ opacity: 0 }}\n                                animate={{\n                                  opacity: 1,\n                                  transition: {\n                                    ease: 'easeInOut',\n                                    duration: 0.3,\n                                    delay: 0.2,\n                                  },\n                                }}\n                                exit={{\n                                  opacity: 0,\n                                  transition: {\n                                    ease: 'easeInOut',\n                                    duration: 0.2,\n                                  },\n                                }}\n                                transition={{ duration: 0.2, delay: 0.2 }}\n                              >\n                                <Image\n                                  src={newItem.url}\n                                  width={1000}\n                                  height={1000}\n                                  alt='preview_img'\n                                  className=' object-contain h-[70vh]  mx-auto rounded-md'\n                                />\n                              </motion.div>\n                            </motion.figure>\n                          )}\n                        </AnimatePresence>\n                      </React.Fragment>\n                    </>\n                  ))}\n                </AnimatePresence>\n              )}\n              <motion.div\n                className='h-[300px] overflow-hidden dark:bg-neutral-900/40 bg-white/40 border rounded-md'\n                ref={carousel}\n              >\n                <motion.div\n                  whileDrag={{ scale: 0.95 }}\n                  dragElastic={0.2}\n                  dragTransition={{ bounceDamping: 30 }}\n                  transition={{ duration: 0.2, ease: 'easeInOut' }}\n                  className='h-fit '\n                  drag='y'\n                  dragConstraints={{ top: constraints, bottom: 0 }}\n                >\n                  {itemArr?.map(\n                    (\n                      itemData: { url: string | StaticImport; id: any },\n                      index: React.Key | null | undefined\n                    ) => {\n                      return (\n                        <motion.div\n                          key={item.id ?? item.url}\n                          className={`relative p-2   cursor-grab active:cursor-grabbing`}\n                          onClick={() => setNewItem(itemData)}\n                        >\n                          <Image\n                            src={itemData?.url}\n                            width={400}\n                            height={400}\n                            alt='img'\n                            className='sm:w-28 w-52 h-16 object-cover cursor-pointer relative z-2 rounded-md pointer-events-none'\n                          />\n                          {itemData?.id === newItem?.id && (\n                            <motion.div\n                              layoutId='slider'\n                              transition={{\n                                layout: {\n                                  duration: 0.2,\n                                  ease: 'easeOut',\n                                },\n                              }}\n                              className='absolute top-0 left-0 h-full w-full dark:bg-neutral-100 bg-neutral-800 rounded-md'\n                            ></motion.div>\n                          )}\n                        </motion.div>\n                      );\n                    }\n                  )}\n                </motion.div>\n              </motion.div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n};\n\nexport default modal;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}