{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "simple-grid",
  "type": "registry:block",
  "title": "Simple grid",
  "description": "Simple grid",
  "files": [
    {
      "path": "components/usages/simplegridusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport SimpleGrid from \"@/registry/open-source/simple-grid\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<SimpleGrid />{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/simplegridusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport SimpleGrid from \"@/registry/open-source/simple-grid\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<SimpleGrid />{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/simple-grid.tsx",
      "content": "import React, { useState } from \"react\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\n\nimport clsx from \"clsx\";\nimport { motion } from \"motion/react\";\nimport { FaArrowRightLong } from \"react-icons/fa6\";\n\n// Credit:\n// https://eclairui.gopx.dev/components/grids/gopx-bento-grid\n\ninterface BentoCardProps {\n\tbgImage: string;\n\tclassName?: string;\n\turl: string;\n\ttitle: string;\n}\n\nconst BentoCard: React.FC<BentoCardProps> = ({\n\tbgImage,\n\tclassName = \"\",\n\turl,\n\ttitle,\n}) => {\n\tconst [isHovered, setIsHovered] = useState(false);\n\n\treturn (\n\t\t<Link href={url} className={clsx(\"block\", className)}>\n\t\t\t<motion.div\n\t\t\t\tclassName=\"relative w-full h-full rounded-lg overflow-hidden group\"\n\t\t\t\tonHoverStart={() => setIsHovered(true)}\n\t\t\t\tonHoverEnd={() => setIsHovered(false)}\n\t\t\t>\n\t\t\t\t<div className=\"absolute inset-0 bg-background dark:bg-background\">\n\t\t\t\t\t<Image\n\t\t\t\t\t\tsrc={bgImage}\n\t\t\t\t\t\talt={title}\n\t\t\t\t\t\tlayout=\"fill\"\n\t\t\t\t\t\tobjectFit=\"cover\"\n\t\t\t\t\t\tclassName=\"transition-[filter,opacity,transform] duration-300 ease-in-out group-hover:blur-xs group-hover:scale-110 opacity-80 group-hover:opacity-100\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"relative z-10 p-3 h-full flex flex-col justify-between text-foreground\">\n\t\t\t\t\t<div className=\"self-end group-hover:-rotate-45 transition-transform duration-700\">\n\t\t\t\t\t\t<FaArrowRightLong size={16} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ToolTitle\n\t\t\t\t\t\t\tisHovered={isHovered}\n\t\t\t\t\t\t\tclassName=\"text-xs sm:text-sm md:text-lg font-bold\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</ToolTitle>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</Link>\n\t);\n};\n\ninterface ToolTitleProps {\n\tchildren: string;\n\tisHovered: boolean;\n\tclassName?: string;\n}\n\nconst ToolTitle: React.FC<ToolTitleProps> = ({\n\tchildren,\n\tisHovered,\n\tclassName,\n}) => {\n\treturn (\n\t\t<motion.div\n\t\t\tclassName={clsx(\n\t\t\t\t\"font-roboto relative block overflow-hidden\",\n\t\t\t\t\"transition-colors duration-300\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<motion.div>\n\t\t\t\t{children.split(\"\").map((letter, index) => (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\tkey={index + \"simple-grid\"}\n\t\t\t\t\t\tinitial={{ y: 0 }}\n\t\t\t\t\t\tanimate={isHovered ? { y: \"-100%\" } : { y: 0 }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.35,\n\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\tdelay: 0.025 * index,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName=\"inline-block\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{letter}\n\t\t\t\t\t</motion.span>\n\t\t\t\t))}\n\t\t\t</motion.div>\n\t\t\t<motion.div className=\"absolute inset-0\">\n\t\t\t\t{children.split(\"\").map((letter, index) => (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\tkey={index + \"simple-grid-child\"}\n\t\t\t\t\t\tinitial={{ y: \"100%\" }}\n\t\t\t\t\t\tanimate={isHovered ? { y: 0 } : { y: \"100%\" }}\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tduration: 0.35,\n\t\t\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t\t\t\tdelay: 0.025 * index,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName=\"inline-block text-foreground\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{letter}\n\t\t\t\t\t</motion.span>\n\t\t\t\t))}\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n};\n\ninterface Card {\n\tbgImage: string;\n\tclassName?: string;\n\turl: string;\n\ttitle: string;\n}\n\nconst SimpleGrid: React.FC = () => {\n\tconst cards: Card[] = [\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\turl: \"/components\",\n\t\t\tclassName: \"col-span-1 row-span-1\",\n\t\t\ttitle: \"Components\",\n\t\t},\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\turl: \"/tools/shadows\",\n\t\t\tclassName: \"col-span-2 row-span-1\",\n\t\t\ttitle: \"Shadow Generator\",\n\t\t},\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\tclassName: \"col-span-1 row-span-1\",\n\t\t\turl: \"/store?tab=Templates\",\n\t\t\ttitle: \"Templates\",\n\t\t},\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\turl: \"/store?tab=Component%20Packs\",\n\t\t\tclassName: \"col-span-1 row-span-1\",\n\t\t\ttitle: \"Packs\",\n\t\t},\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\tclassName: \"col-span-1 row-span-1\",\n\t\t\turl: \"/pricing\",\n\t\t\ttitle: \"Pricing\",\n\t\t},\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\tclassName: \"col-span-2 row-span-1\",\n\t\t\turl: \"/tools/colors\",\n\t\t\ttitle: \"Color Generator\",\n\t\t},\n\t\t{\n\t\t\tbgImage: `/itjustworks.jpg`,\n\t\t\tclassName: \"col-span-1 row-span-1\",\n\t\t\turl: \"/faqs\",\n\t\t\ttitle: \"FAQs\",\n\t\t},\n\t];\n\n\treturn (\n\t\t<div className=\"w-full aspect-square grid grid-cols-3 grid-rows-3 gap-4\">\n\t\t\t{cards.map((card, index) => (\n\t\t\t\t<BentoCard key={index + \"simple-grid-bento\"} {...card} />\n\t\t\t))}\n\t\t</div>\n\t);\n};\n\nexport default SimpleGrid;\n",
      "type": "registry:ui"
    }
  ]
}