{
  "name": "logo/cloud-inline",
  "type": "registry:component",
  "description": "Inline logo cloud strip",
  "files": [
    {
      "path": "example/Logo/LogoCloudInline.astro",
      "type": "registry:component",
      "content": "---\nimport ScrollRail from '@@/components/ui/ScrollRail.astro';\n\ninterface Props {\n  title?: string;\n  logos?: Array<{\n    name: string;\n    src?: string;\n    width?: string;\n    height?: string;\n  }>;\n  animationDuration?: string;\n  gap?: string;\n}\n\nconst {\n  title = 'Trusted by leading companies',\n  logos = [\n    {\n      name: 'Logo 1',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-132x53_0442ae34-055f-4801-98d6-0c1e0a0427b7.svg',\n      width: '132px',\n      height: '53px',\n    },\n    {\n      name: 'Logo 2',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_692339a2-5fff-4bd6-bd1f-309e5697ff07.svg',\n      width: '135px',\n      height: '31px',\n    },\n    {\n      name: 'Logo 3',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_fc50848e-eb55-4ec4-aeb7-0ad68a186f3b.svg',\n      width: '78px',\n      height: '59px',\n    },\n    {\n      name: 'Logo 4',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_93dda93a-62c6-4aec-ba0a-6ba6285958da.svg',\n      width: '135px',\n      height: '31px',\n    },\n    {\n      name: 'Logo 5',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-135x31_b85bd8d6-7b56-4343-9101-cdbafed6993a.svg',\n      width: '135px',\n      height: '31px',\n    },\n    {\n      name: 'Logo 6',\n      src: 'https://storage.googleapis.com/studio-design-asset-files/projects/nBW2xE71qv/s-78x59_b95207a4-f41c-4be9-98cc-0dcda004c65e.svg',\n      width: '78px',\n      height: '59px',\n    },\n  ],\n  animationDuration = '30s',\n  gap = '80px',\n} = Astro.props;\n---\n\n<div class=\"logo-cloud w-full py-12\">\n  <div class=\"container\">\n    <p class=\"text-fg-sub mb-8 text-center text-sm font-medium tracking-wider\">\n      {title}\n    </p>\n    <ScrollRail\n      autoScroll={true}\n      duration={animationDuration}\n      gap={gap}\n      class=\"items-center\"\n      useMask={true}\n    >\n      {\n        logos.map((logo) => (\n          <div class=\"flex flex-shrink-0 items-center justify-center\">\n            {logo.src ? (\n              <img\n                src={logo.src}\n                alt={logo.name}\n                width={logo.width || \"120\"}\n                height={logo.height || \"40\"}\n                class=\"h-auto opacity-60 grayscale transition-all hover:opacity-100 hover:grayscale-0\"\n                style={`width: ${logo.width || \"120px\"}; height: ${logo.height || \"40px\"}; object-fit: contain;`}\n              />\n            ) : (\n              <div\n                class=\"text-fg-sub flex items-center justify-center text-lg font-semibold opacity-60 transition-opacity hover:opacity-100\"\n                style={`width: ${logo.width || \"120px\"}; height: ${logo.height || \"40px\"};`}\n              >\n                {logo.name}\n              </div>\n            )}\n          </div>\n        ))\n      }\n    </ScrollRail>\n  </div>\n</div>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "brand-logo"
  ]
}