{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layout-grid",
  "type": "registry:block",
  "title": "Layout grid",
  "description": "Layout grid",
  "files": [
    {
      "path": "components/usages/layoutgridusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { LayoutGrid } from \"@/registry/open-source/layout-grid\";\n\nfunction LayoutGridDemo() {\n\treturn (\n\t\t<div className=\"h-screen py-20 w-full\">\n\t\t\t<LayoutGrid cards={cards} />\n\t\t</div>\n\t);\n}\n\nconst SkeletonOne = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tHouse in the woods\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tA serene and tranquil retreat, this house in the woods offers a\n\t\t\t\tpeaceful escape from the hustle and bustle of city life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\n\nconst SkeletonTwo = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tHouse above the clouds\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tPerched high above the world, this house offers breathtaking views\n\t\t\t\tand a unique living experience. It&apos;s a place where the sky\n\t\t\t\tmeets home, and tranquility is a way of life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\nconst SkeletonThree = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tGreens all over\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tA house surrounded by greenery and nature&apos;s beauty. It&apos;s\n\t\t\t\tthe perfect place to relax, unwind, and enjoy life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\nconst SkeletonFour = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tRivers are serene\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tA house by the river is a place of peace and tranquility. It&apos;s\n\t\t\t\tthe perfect place to relax, unwind, and enjoy life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\n\nexport const cards = [\n\t{\n\t\tid: 1,\n\t\tcontent: <SkeletonOne />,\n\t\tclassName: \"md:col-span-2\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 2,\n\t\tcontent: <SkeletonTwo />,\n\t\tclassName: \"col-span-1\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 3,\n\t\tcontent: <SkeletonThree />,\n\t\tclassName: \"col-span-1\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 4,\n\t\tcontent: <SkeletonFour />,\n\t\tclassName: \"md:col-span-2\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n];\n\nexport default LayoutGridDemo;\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/layoutgridusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { LayoutGrid } from \"@/registry/open-source/layout-grid\";\n\nfunction LayoutGridDemo() {\n\treturn (\n\t\t<div className=\"h-screen py-20 w-full\">\n\t\t\t<LayoutGrid cards={cards} />\n\t\t</div>\n\t);\n}\n\nconst SkeletonOne = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tHouse in the woods\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tA serene and tranquil retreat, this house in the woods offers a\n\t\t\t\tpeaceful escape from the hustle and bustle of city life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\n\nconst SkeletonTwo = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tHouse above the clouds\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tPerched high above the world, this house offers breathtaking views\n\t\t\t\tand a unique living experience. It&apos;s a place where the sky\n\t\t\t\tmeets home, and tranquility is a way of life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\nconst SkeletonThree = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tGreens all over\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tA house surrounded by greenery and nature&apos;s beauty. It&apos;s\n\t\t\t\tthe perfect place to relax, unwind, and enjoy life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\nconst SkeletonFour = () => {\n\treturn (\n\t\t<div>\n\t\t\t<p className=\"font-bold md:text-4xl text-xl text-secondary\">\n\t\t\t\tRivers are serene\n\t\t\t</p>\n\t\t\t<p className=\"font-normal text-base text-secondary\"></p>\n\t\t\t<p className=\"font-normal text-base my-4 max-w-lg text-secondary\">\n\t\t\t\tA house by the river is a place of peace and tranquility. It&apos;s\n\t\t\t\tthe perfect place to relax, unwind, and enjoy life.\n\t\t\t</p>\n\t\t</div>\n\t);\n};\n\nexport const cards = [\n\t{\n\t\tid: 1,\n\t\tcontent: <SkeletonOne />,\n\t\tclassName: \"md:col-span-2\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 2,\n\t\tcontent: <SkeletonTwo />,\n\t\tclassName: \"col-span-1\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 3,\n\t\tcontent: <SkeletonThree />,\n\t\tclassName: \"col-span-1\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n\t{\n\t\tid: 4,\n\t\tcontent: <SkeletonFour />,\n\t\tclassName: \"md:col-span-2\",\n\t\tthumbnail: \"/itjustworks.jpg\",\n\t},\n];\n\nexport default LayoutGridDemo;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/layout-grid.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion } from \"motion/react\";\n\n// https://ui.aceternity.com/components/layout-grid\n\ntype Card = {\n\tid: number;\n\tcontent: JSX.Element | React.ReactNode | string;\n\tclassName: string;\n\tthumbnail: string;\n};\n\nexport const LayoutGrid = ({ cards }: { cards: Card[] }) => {\n\tconst [selected, setSelected] = useState<Card | null>(null);\n\tconst [lastSelected, setLastSelected] = useState<Card | null>(null);\n\n\tconst handleClick = (card: Card) => {\n\t\tsetLastSelected(selected);\n\t\tsetSelected(card);\n\t};\n\n\tconst handleOutsideClick = () => {\n\t\tsetLastSelected(selected);\n\t\tsetSelected(null);\n\t};\n\n\treturn (\n\t\t<div className=\"relative w-full h-full p-10 grid grid-cols-1 md:grid-cols-3 max-w-7xl mx-auto gap-4 \">\n\t\t\t{cards.map((card, i) => (\n\t\t\t\t<div key={i + \"layout-grid\"} className={cn(card.className, \"\")}>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tonClick={() => handleClick(card)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tcard.className,\n\t\t\t\t\t\t\t\"relative overflow-hidden\",\n\t\t\t\t\t\t\tselected?.id === card.id\n\t\t\t\t\t\t\t\t? \"rounded-lg cursor-pointer absolute inset-0 h-1/2 w-full md:w-1/2 m-auto z-40 flex justify-center items-center flex-wrap flex-col\"\n\t\t\t\t\t\t\t\t: lastSelected?.id === card.id\n\t\t\t\t\t\t\t\t\t? \"z-40 bg-background rounded-xl h-full w-full\"\n\t\t\t\t\t\t\t\t\t: \"bg-background rounded-xl h-full w-full\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tlayout\n\t\t\t\t\t>\n\t\t\t\t\t\t{selected?.id === card.id && (\n\t\t\t\t\t\t\t<SelectedCard selected={selected} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<BlurImage card={card} />\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t\t<motion.div\n\t\t\t\tonClick={handleOutsideClick}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute h-full w-full left-0 top-0 bg-background opacity-0 z-10\",\n\t\t\t\t\tselected?.id ? \"pointer-events-auto\" : \"pointer-events-none\"\n\t\t\t\t)}\n\t\t\t\tanimate={{ opacity: selected?.id ? 0.3 : 0 }}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nconst BlurImage = ({ card }: { card: Card }) => {\n\treturn (\n\t\t<img\n\t\t\tsrc={card.thumbnail}\n\t\t\theight=\"500\"\n\t\t\twidth=\"500\"\n\t\t\tclassName={\n\t\t\t\t\"blur-none object-cover object-top absolute inset-0 h-full w-full transition duration-200\"\n\t\t\t}\n\t\t\talt=\"thumbnail\"\n\t\t/>\n\t);\n};\n\nconst SelectedCard = ({ selected }: { selected: Card | null }) => {\n\treturn (\n\t\t<div className=\"bg-transparent h-full w-full flex flex-col justify-end rounded-lg shadow-2xl relative z-60\">\n\t\t\t<motion.div\n\t\t\t\tinitial={{\n\t\t\t\t\topacity: 0,\n\t\t\t\t}}\n\t\t\t\tanimate={{\n\t\t\t\t\topacity: 0.6,\n\t\t\t\t}}\n\t\t\t\tclassName=\"absolute inset-0 h-full w-full bg-background opacity-60 z-10\"\n\t\t\t/>\n\t\t\t<motion.div\n\t\t\t\tinitial={{\n\t\t\t\t\topacity: 0,\n\t\t\t\t\ty: 100,\n\t\t\t\t}}\n\t\t\t\tanimate={{\n\t\t\t\t\topacity: 1,\n\t\t\t\t\ty: 0,\n\t\t\t\t}}\n\t\t\t\ttransition={{\n\t\t\t\t\tduration: 0.3,\n\t\t\t\t\tease: \"easeInOut\",\n\t\t\t\t}}\n\t\t\t\tclassName=\"relative px-8 pb-4 z-70\"\n\t\t\t>\n\t\t\t\t{selected?.content}\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}