{
  "name": "masonry-ssr-demo",
  "type": "registry:example",
  "registryDependencies": [
    "masonry",
    "skeleton"
  ],
  "files": [
    {
      "path": "examples/masonry-ssr-demo.tsx",
      "type": "registry:example",
      "content": "import { Masonry, MasonryItem } from \"@/registry/bases/radix/ui/masonry\";\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\";\n\ninterface SkateboardTrick {\n  id: string;\n  title: string;\n  description: string;\n}\n\nfunction getTricks(): SkateboardTrick[] {\n  return [\n    {\n      id: \"1\",\n      title: \"The 900\",\n      description: \"The 900 is a trick where you spin 900 degrees in the air.\",\n    },\n    {\n      id: \"2\",\n      title: \"Indy Backflip\",\n      description:\n        \"The Indy Backflip is a trick where you backflip in the air while grabbing the board with your back hand.\",\n    },\n    {\n      id: \"3\",\n      title: \"Pizza Guy\",\n      description:\n        \"The Pizza Guy is a trick where you flip the board like a pizza.\",\n    },\n    {\n      id: \"4\",\n      title: \"Rocket Air\",\n      description:\n        \"The Rocket Air is a trick where you grab the nose of your board and point it straight up to the sky.\",\n    },\n    {\n      id: \"5\",\n      title: \"Kickflip\",\n      description:\n        \"A kickflip is performed by flipping your skateboard lengthwise using your front foot.\",\n    },\n    {\n      id: \"6\",\n      title: \"FS 540\",\n      description:\n        \"The FS 540 is a trick where you spin frontside 540 degrees in the air.\",\n    },\n  ];\n}\n\nfunction TrickCard({ trick }: { trick: SkateboardTrick }) {\n  return (\n    <div className=\"flex flex-col gap-2 rounded-md border bg-card p-4 text-card-foreground shadow-xs\">\n      <div className=\"text-sm leading-tight font-medium sm:text-base\">\n        {trick.title}\n      </div>\n      <span className=\"text-sm text-muted-foreground\">{trick.description}</span>\n    </div>\n  );\n}\n\nfunction SkeletonCard() {\n  return (\n    <div className=\"flex flex-col gap-2 rounded-md border bg-card p-4\">\n      <Skeleton className=\"h-5 w-24\" />\n      <Skeleton className=\"h-4 w-full\" />\n      <Skeleton className=\"h-4 w-3/4\" />\n    </div>\n  );\n}\n\nexport default function MasonrySSRDemo() {\n  const tricks = getTricks();\n  const skeletonIds = Array.from(\n    { length: 6 },\n    () => `skeleton-${Math.random().toString(36).substring(2, 9)}`,\n  );\n\n  return (\n    <Masonry\n      columnCount={3}\n      gap={{ column: 8, row: 8 }}\n      className=\"w-full\"\n      fallback={\n        <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3\">\n          {skeletonIds.map((id) => (\n            <SkeletonCard key={id} />\n          ))}\n        </div>\n      }\n    >\n      {tricks.map((trick) => (\n        <MasonryItem\n          key={trick.id}\n          className=\"relative overflow-hidden transition-all duration-300 hover:scale-[1.02]\"\n        >\n          <TrickCard trick={trick} />\n        </MasonryItem>\n      ))}\n    </Masonry>\n  );\n}\n",
      "target": ""
    }
  ]
}