{
  "name": "layout-grid",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/layout-grid.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ntype Card = {\n  id: number;\n  content: JSX.Element | React.ReactNode | string;\n  className: string;\n  thumbnail: string;\n};\n\nexport const LayoutGrid = ({ cards }: { cards: Card[] }) => {\n  const [selected, setSelected] = useState<Card | null>(null);\n  const [lastSelected, setLastSelected] = useState<Card | null>(null);\n\n  const handleClick = (card: Card) => {\n    setLastSelected(selected);\n    setSelected(card);\n  };\n\n  const handleOutsideClick = () => {\n    setLastSelected(selected);\n    setSelected(null);\n  };\n\n  return (\n    <div className=\"w-full h-full p-10 grid grid-cols-1 md:grid-cols-3  max-w-7xl mx-auto gap-4 relative\">\n      {cards.map((card, i) => (\n        <div key={i} className={cn(card.className, \"\")}>\n          <motion.div\n            onClick={() => handleClick(card)}\n            className={cn(\n              card.className,\n              \"relative overflow-hidden\",\n              selected?.id === card.id\n                ? \"rounded-lg cursor-pointer absolute inset-0 h-1/2 w-full md:w-1/2 m-auto z-50 flex justify-center items-center flex-wrap flex-col\"\n                : lastSelected?.id === card.id\n                ? \"z-40 bg-white rounded-xl h-full w-full\"\n                : \"bg-white rounded-xl h-full w-full\"\n            )}\n            layoutId={`card-${card.id}`}\n          >\n            {selected?.id === card.id && <SelectedCard selected={selected} />}\n            <ImageComponent card={card} />\n          </motion.div>\n        </div>\n      ))}\n      <motion.div\n        onClick={handleOutsideClick}\n        className={cn(\n          \"absolute h-full w-full left-0 top-0 bg-black opacity-0 z-10\",\n          selected?.id ? \"pointer-events-auto\" : \"pointer-events-none\"\n        )}\n        animate={{ opacity: selected?.id ? 0.3 : 0 }}\n      />\n    </div>\n  );\n};\n\nconst ImageComponent = ({ card }: { card: Card }) => {\n  return (\n    <motion.img\n      layoutId={`image-${card.id}-image`}\n      src={card.thumbnail}\n      height=\"500\"\n      width=\"500\"\n      className={cn(\n        \"object-cover object-top absolute inset-0 h-full w-full transition duration-200\"\n      )}\n      alt=\"thumbnail\"\n    />\n  );\n};\n\nconst SelectedCard = ({ selected }: { selected: Card | null }) => {\n  return (\n    <div className=\"bg-transparent h-full w-full flex flex-col justify-end rounded-lg shadow-2xl relative z-[60]\">\n      <motion.div\n        initial={{\n          opacity: 0,\n        }}\n        animate={{\n          opacity: 0.6,\n        }}\n        className=\"absolute inset-0 h-full w-full bg-black opacity-60 z-10\"\n      />\n      <motion.div\n        layoutId={`content-${selected?.id}`}\n        initial={{\n          opacity: 0,\n          y: 100,\n        }}\n        animate={{\n          opacity: 1,\n          y: 0,\n        }}\n        exit={{\n          opacity: 0,\n          y: 100,\n        }}\n        transition={{\n          duration: 0.3,\n          ease: \"easeInOut\",\n        }}\n        className=\"relative px-8 pb-4 z-[70]\"\n      >\n        {selected?.content}\n      </motion.div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/layout-grid.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Layout Grid"
}