{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "unsplash-grid",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/grid/unsplash-grid.tsx",
      "content": "'use client';\nimport { items } from '@/components/website/constant';\nimport { motion, useInView } from 'motion/react';\n// inspired by tom is loading\nimport React, { useRef, useState } from 'react';\n\nfunction UnsplashGrid() {\n  const [selected, setSelected] = useState(null);\n\n  return (\n    <>\n      <div className='container mx-auto p-4 '>\n        <div className='columns-2 md:columns-3 2xl:columns-4 gap-4'>\n          <>\n            {items.map((item, index) => (\n              <ImageItem key={item.id} item={item} index={index} setSelected={setSelected} />\n            ))}\n          </>\n        </div>\n      </div>\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      whileTap={{ scale: 0.9 }}\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 overflow-hidden 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\nexport default UnsplashGrid;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}