{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logos-marquee",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/marquee/logos-marquee.tsx",
      "content": "import { Marquee } from '@/components/ui/marquee';\nimport { cn } from '@/lib/utils';\n\nconst logos = [\n  {\n    name: 'Apple',\n    img: 'https://cdn.simpleicons.org/apple/000/fff',\n  },\n  {\n    name: 'Google',\n    img: 'https://cdn.simpleicons.org/google/000/fff',\n  },\n  {\n    name: 'Facebook',\n    img: 'https://cdn.simpleicons.org/facebook/000/fff',\n  },\n  {\n    name: 'ChatGPT',\n    img: 'https://upload.wikimedia.org/wikipedia/commons/6/66/OpenAI_logo_2025_%28symbol%29.svg',\n  },\n  {\n    name: 'X',\n    img: 'https://upload.wikimedia.org/wikipedia/commons/0/09/X_%28formerly_Twitter%29_logo_late_2025.svg',\n  },\n];\n\nconst Logo = ({ name, img }: { name: string; img: string }) => {\n  return (\n    <div className={cn('h-12 w-12 cursor-pointer')}>\n      <img src={img} alt={name} />\n    </div>\n  );\n};\n\nconst MarqueeLogos = () => {\n  return (\n    <div className='relative flex h-full w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg dark:bg-neutral-800 bg-neutral-50 py-20 '>\n      <Marquee className='[--gap:3rem]'>\n        {logos.map((logo) => (\n          <Logo key={logo.name} {...logo} />\n        ))}\n      </Marquee>\n      <div className='pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-linear-to-r from-white dark:from-neutral-900'></div>\n      <div className='pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-linear-to-l from-white dark:from-neutral-900'></div>\n    </div>\n  );\n};\n\nexport default MarqueeLogos;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/marquee.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\n\ninterface MarqueeProps {\n  className?: string;\n  reverse?: boolean;\n  pauseOnHover?: boolean;\n  children?: React.ReactNode;\n  vertical?: boolean;\n  repeat?: number;\n  [key: string]: any;\n}\n\nexport function Marquee({\n  className,\n  reverse,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 4,\n  ...props\n}: MarqueeProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',\n        {\n          'flex-row': !vertical,\n          'flex-col': vertical,\n        },\n        className\n      )}\n    >\n      {Array(repeat)\n        .fill(0)\n        .map((_, i) => (\n          <div\n            key={i}\n            className={cn('flex shrink-0 justify-around gap-(--gap)', {\n              'animate-marquee flex-row': !vertical && !reverse,\n              'animate-marquee-vertical flex-col': vertical && !reverse,\n              'animate-marquee-reverse flex-row': !vertical && reverse,\n              'animate-marquee-vertical-reverse flex-col': vertical && reverse,\n              'group-hover:[animation-play-state:paused]': pauseOnHover,\n            })}\n          >\n            {children}\n          </div>\n        ))}\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}