{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-bento-grid",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/expandable-bento-grid.tsx",
      "content": "'use client'\r\n\r\nimport React, { useEffect, useId, useRef, useState } from 'react'\r\nimport { AnimatePresence, motion } from 'framer-motion'\r\nimport { useOutsideClick } from '@/hooks/use-outside-click'\r\nimport { X } from 'lucide-react'\r\n\r\nexport interface BentoGridProps {\r\n    items: {\r\n        id: string | number\r\n        title: string\r\n        subtitle?: string\r\n        description?: string\r\n        content: React.ReactNode\r\n        icon?: React.ReactNode\r\n        className?: string\r\n    }[]\r\n}\r\n\r\nexport default function ExpandableBentoGrid({ items }: BentoGridProps) {\r\n    const [active, setActive] = useState<(typeof items)[number] | boolean | null>(null)\r\n    const ref = useRef<HTMLDivElement>(null)\r\n    const id = useId()\r\n\r\n    useEffect(() => {\r\n        function onKeyDown(event: KeyboardEvent) {\r\n            if (event.key === 'Escape') {\r\n                setActive(false)\r\n            }\r\n        }\r\n\r\n        if (active && typeof active === 'object') {\r\n            document.body.style.overflow = 'hidden'\r\n        } else {\r\n            document.body.style.overflow = 'auto'\r\n        }\r\n\r\n        window.addEventListener('keydown', onKeyDown)\r\n        return () => window.removeEventListener('keydown', onKeyDown)\r\n    }, [active])\r\n\r\n    useOutsideClick(ref, () => setActive(null))\r\n\r\n    return (\r\n        <>\r\n            <AnimatePresence>\r\n                {active && typeof active === 'object' && (\r\n                    <motion.div\r\n                        initial={{ opacity: 0 }}\r\n                        animate={{ opacity: 1 }}\r\n                        exit={{ opacity: 0 }}\r\n                        className=\"fixed inset-0 bg-black/20 h-full w-full z-[10000]\"\r\n                    />\r\n                )}\r\n            </AnimatePresence>\r\n            <AnimatePresence>\r\n                {active && typeof active === 'object' ? (\r\n                    <div className=\" fixed inset-0 top-16 grid place-items-center z-[10001] \">\r\n                        <motion.button\r\n                            key={`button-${active.title}-${id}`}\r\n                            layout\r\n                            initial={{ opacity: 0 }}\r\n                            animate={{ opacity: 1 }}\r\n                            exit={{ opacity: 0, transition: { duration: 0.05 } }}\r\n                            className=\"flex absolute top-2 right-2 md:right-10 lg:hidden items-center justify-center bg-white rounded-full h-6 w-6\"\r\n                            onClick={() => setActive(null)}\r\n                        >\r\n                            <X className=\"h-4 w-4 dark:text-white text-black\" />\r\n                            \r\n                        </motion.button>\r\n                        <motion.div\r\n                            layoutId={`card-${active.title}-${id}`}\r\n                            ref={ref}\r\n                            className=\"w-full max-w-[500px] h-full md:h-fit md:max-h-[90%] flex flex-col bg-white dark:bg-neutral-900 sm:rounded-3xl overflow-hidden\"\r\n                        >\r\n                            <motion.div layoutId={`image-${active.title}-${id}`}>\r\n                                <div className=\"w-full h-40 md:h-50 lg:h-60 bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center perspective-distant transform-3d\">\r\n                                    {active.icon ? (\r\n                                        <div className=\"scale-[2] text-blue-500\">{active.icon}</div>\r\n                                    ) : (\r\n                                        <div className=\"w-full h-full bg-gray-200\" />\r\n                                    )}\r\n                                </div>\r\n                            </motion.div>\r\n\r\n                            <div >\r\n                                <div className=\"flex justify-between p-4  items-center\">\r\n                                    <div className=\"\">\r\n                                        <motion.h3\r\n                                            layoutId={`title-${active.title}-${id}`}\r\n                                            className=\"font-bold text-neutral-700 dark:text-neutral-200 md:text-sm \"\r\n                                        >\r\n                                            {active.title}\r\n                                        </motion.h3>\r\n                                        <motion.p\r\n                                            layoutId={`description-${active.title}-${id}`}\r\n                                            className=\"text-neutral-600 dark:text-neutral-400 text-[14px] text-balance\"\r\n                                        >\r\n                                            {active.description}\r\n                                        </motion.p>\r\n                                    </div>\r\n\r\n                                    <motion.a\r\n                                        layoutId={`button-${active.title}-${id}`}\r\n                                        href=\"#\"\r\n                                        target=\"_blank\"\r\n                                        className=\"px-4 py-3 text-sm rounded-2xl font-bold bg-blue-100 dark:bg-blue-900/30 text-white\"\r\n                                    >\r\n                                        Visit\r\n                                    </motion.a>\r\n                                </div>\r\n\r\n\r\n                             \r\n                                  <div className=\"pt-4  px-4  flex justify-center mx-auto overflow-auto\">\r\n                                    <motion.div\r\n                                        layout\r\n                                        initial={{ opacity: 0 }}\r\n                                        animate={{ opacity: 1 }}\r\n                                        exit={{ opacity: 0 }}\r\n                                        className=\"text-neutral-600 text-xs md:text-sm lg:text-base h-40 md:h-fit pb-5 flex flex-col items-start gap-4  dark:text-neutral-400 [mask:linear-gradient(to_bottom,white,white,transparent)] [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch]\"\r\n                                    >\r\n                                        {active.content}\r\n                                    </motion.div>\r\n                                </div>\r\n                              </div>\r\n                          \r\n                        </motion.div>\r\n                    </div>\r\n                ) : null}\r\n            </AnimatePresence>\r\n            <ul className=\"max-w-4xl mx-auto w-full gap-2 lg:gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  items-start \">\r\n                {items.map((item) => (\r\n                    <motion.div\r\n                        layoutId={`card-${item.title}-${id}`}\r\n                        key={item.id}\r\n                        onClick={() => setActive(item)}\r\n                        className=\"p-4 flex flex-col md:flex-row justify-between items-center hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded-xl cursor-pointer bg-blue-50/60 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-800 transition-colors\"\r\n                    >\r\n                        <div className=\"flex gap-3 flex-row items-center justify-center mx-auto \">\r\n                            <motion.div layoutId={`image-${item.title}-${id}`}>\r\n                                <div className=\"h-14 w-14 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-500 p-1\">\r\n                                    {item.icon}\r\n                                </div>\r\n                            </motion.div>\r\n                            <div className=\"\">\r\n                                <motion.h3\r\n                                    layoutId={`title-${item.title}-${id}`}\r\n                                    className=\"font-medium  text-neutral-800 dark:text-neutral-200  text-left\"\r\n                                >\r\n                                    {item.title}\r\n                                </motion.h3>\r\n                                <motion.p\r\n                                    layoutId={`description-${item.title}-${id}`}\r\n                                    className=\"text-neutral-600 dark:text-neutral-400 text-left  text-xs md:text-[14px]\"\r\n                                >\r\n                                    {item.subtitle}\r\n                                </motion.p>\r\n                            </div>\r\n                        </div>\r\n                    </motion.div>\r\n                ))}\r\n            </ul>\r\n        </>\r\n    )\r\n}\r\n",
      "type": "registry:ui",
      "target": "components/ui/expandable-bento-grid.tsx"
    }
  ]
}