{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-grid",
  "type": "registry:component",
  "title": "Bento Grid",
  "author": "codefellas <codefellasdd@gmail.com>",
  "description": "A bento grid component.",
  "dependencies": [
    "lucide-react",
    "framer-motion"
  ],
  "registryDependencies": [
    "button",
    "@fellasUI/blur-in",
    "@fellasUI/utils"
  ],
  "files": [
    {
      "path": "registry/@fellas/ui/bento-grid/bento-grid.tsx",
      "content": "import { Button } from \"@/registry/@fellas/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { ArrowRight } from \"lucide-react\";\nimport { ReactNode } from \"react\";\nimport BlurIn from \"@/registry/@fellas/ui/blur-in/blur-in\";\n\nconst BentoGrid = ({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) => {\n  return (\n    <div\n      className={cn(\n        \"grid w-full auto-rows-[22rem] grid-cols-3 gap-2 lg:gap-4\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst BentoCard = ({\n  name,\n  className,\n  background,\n  Icon,\n  description,\n  href,\n  cta,\n}: {\n  name?: string;\n  className?: string;\n  background?: ReactNode;\n  Icon?: any;\n  description?: string;\n  href?: string;\n  cta?: string;\n}) => (\n  <BlurIn\n    duration={0.1}\n    key={name}\n    className={cn(\n      \"group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl\",\n      // light styles\n      \"bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]\",\n      // dark styles\n      \"dark:bg-background dark:[border:1px_solid_rgba(255,255,255,.1)]\",\n      className\n    )}\n  >\n    <div>{background}</div>\n    <div className=\"pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10\">\n      <div className=\"flex flex-col gap-2\">\n        <div>\n          {Icon !== \"\" ? (\n            <Icon className=\"h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75\" />\n          ) : (\n            \"\"\n          )}\n        </div>\n\n        <div className=\"text-3xl font-semibold text-neutral-700 dark:text-neutral-300\">\n          {name}\n        </div>\n      </div>\n      <p className=\"w-full text-neutral-500 dark:text-neutral-400 dark:drop-shadow\">\n        {description}\n      </p>\n    </div>\n\n    <div\n      className={cn(\n        \"pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100\"\n      )}\n    >\n      {href !== \"\" ? (\n        <Button\n          variant=\"ghost\"\n          asChild\n          size=\"sm\"\n          className=\"pointer-events-auto group/Arrow\"\n        >\n          <a href={href}>\n            {cta}\n            <ArrowRight className=\"ml-2 h-4 w-4 lg:group-hover/Arrow:translate-x-1 transition-transform duration-300\" />\n          </a>\n        </Button>\n      ) : (\n        \"\"\n      )}\n    </div>\n    <div className=\"pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10\" />\n  </BlurIn>\n);\n\nexport { BentoCard, BentoGrid };",
      "type": "registry:component",
      "target": "components/fellasUI/bento-grid/bento-grid.tsx"
    }
  ]
}