{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "snapp-landing-skeleton",
  "title": "Snapp Landing Skeleton",
  "description": "Accessible loading skeleton for the shared Snapp hero, search, and catalogue-card layout.",
  "registryDependencies": [
    "@snapp/snapp-skeleton",
    "@snapp/snapp-theme",
    "@snapp/snapp-utils"
  ],
  "files": [
    {
      "path": "registry/radix-nova/components/catalogue/landing-skeleton.tsx",
      "content": "import { Skeleton, SkeletonGroup } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\n\ninterface LandingSkeletonProps\n  extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  itemCount?: number\n}\n\nfunction LandingSkeleton({\n  \"aria-label\": ariaLabel = \"Loading catalogue\",\n  className,\n  itemCount = 4,\n  ...props\n}: LandingSkeletonProps) {\n  const itemKeys = Array.from(\n    { length: Math.max(0, itemCount) },\n    (_, index) => `landing-skeleton-${index}`,\n  )\n\n  return (\n    <SkeletonGroup\n      aria-label={ariaLabel}\n      className={cn(\n        \"flex min-h-screen flex-1 bg-snapp-surface-primary\",\n        className,\n      )}\n      data-slot=\"snapp-landing-skeleton\"\n      {...props}\n    >\n      <main className=\"flex flex-1 flex-col justify-between\">\n        <div className=\"flex min-h-0 flex-1 flex-col items-center justify-center\">\n          <section className=\"box-border flex w-full flex-col items-start px-snapp-hero-x py-20 max-snapp-wide:px-8 max-snapp-mobile:py-14 max-snapp-compact:px-4\">\n            <div className=\"mx-auto flex w-full max-w-snapp-content flex-col items-start gap-12 max-snapp-mobile:gap-8\">\n              <div className=\"flex w-full flex-col items-center gap-6 text-center\">\n                <div className=\"flex w-full flex-col items-center gap-1\">\n                  <Skeleton className=\"h-15.5 w-snapp-hero-title bg-snapp-skeleton-soft\" />\n                  <Skeleton className=\"h-5.75 w-snapp-hero-copy bg-snapp-skeleton-soft\" />\n                </div>\n                <Skeleton className=\"h-14 w-full rounded-full bg-snapp-skeleton-soft\" />\n              </div>\n\n              <div className=\"flex w-full flex-wrap items-start gap-6\">\n                {itemKeys.map((key) => (\n                  <div\n                    className=\"box-border flex h-snapp-card w-snapp-card-width flex-col items-center justify-center gap-3 rounded-snapp-m border border-snapp-skeleton-line bg-snapp-surface-primary p-5.75 max-snapp-mobile:w-snapp-card-half max-snapp-compact:w-full\"\n                    key={key}\n                  >\n                    <Skeleton className=\"size-10 bg-snapp-skeleton-icon\" />\n                    <Skeleton className=\"h-5 w-36 bg-snapp-skeleton-line\" />\n                  </div>\n                ))}\n              </div>\n            </div>\n          </section>\n        </div>\n\n        <footer className=\"pb-6 text-center\">\n          <Skeleton className=\"mx-auto h-4 w-64 bg-snapp-skeleton-soft\" />\n        </footer>\n      </main>\n    </SkeletonGroup>\n  )\n}\n\nexport { LandingSkeleton }\nexport type { LandingSkeletonProps }\n",
      "type": "registry:component",
      "target": "@components/snapp/catalogue/landing-skeleton.tsx"
    }
  ],
  "type": "registry:component"
}