{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "default-marquee",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/marquee/default-marquee.tsx",
      "content": "import { Marquee } from '@/components/ui/marquee';\nimport { cn } from '@/lib/utils';\n\nconst reviews = [\n  {\n    name: 'Jack',\n    username: '@jack',\n    body: \"I've never seen anything like this before. It's amazing. I love it.\",\n    img: 'bg-green-500',\n  },\n  {\n    name: 'Jill',\n    username: '@jill',\n    body: \"I don't know what to say. I'm speechless. This is amazing.\",\n    img: 'bg-blue-500',\n  },\n  {\n    name: 'John',\n    username: '@john',\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: 'bg-red-500',\n  },\n  {\n    name: 'Jane',\n    username: '@jane',\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: 'bg-yellow-500',\n  },\n  {\n    name: 'Jenny',\n    username: '@jenny',\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: 'bg-purple-500',\n  },\n  {\n    name: 'James',\n    username: '@james',\n    body: \"I'm at a loss for words. This is amazing. I love it.\",\n    img: 'bg-pink-500',\n  },\n];\n\nconst firstRow = reviews.slice(0, reviews.length / 2);\nconst secondRow = reviews.slice(reviews.length / 2);\n\nconst ReviewCard = ({\n  img,\n  name,\n  username,\n  body,\n}: {\n  img: string;\n  name: string;\n  username: string;\n  body: string;\n}) => {\n  return (\n    <figure\n      className={cn(\n        'relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4',\n        // light styles\n        'border-neutral-950/10 bg-neutral-950/1 hover:bg-neutral-950/5',\n        // dark styles\n        'dark:border-neutral-50/10 dark:bg-neutral-50/10 dark:hover:bg-neutral-50/15'\n      )}\n    >\n      <div className='absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(125%_125%_at_50%_10%,rgba(255,255,255,0)_40%,#335fee_100%)] pointer-events-none'></div>\n      <div className='flex flex-row items-center gap-2'>\n        <div className={cn('rounded-full w-8 h-8', img)}></div>\n        <div className='flex flex-col'>\n          <figcaption className='text-sm font-medium dark:text-white'>{name}</figcaption>\n          <p className='text-xs font-medium dark:text-white/40'>{username}</p>\n        </div>\n      </div>\n      <blockquote className='mt-2 text-sm'>{body}</blockquote>\n    </figure>\n  );\n};\n\nconst MarqueeDemo = () => {\n  return (\n    <div className='relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-lg py-10'>\n      <Marquee pauseOnHover className='[--duration:20s]'>\n        {firstRow.map((review) => (\n          <ReviewCard key={review.username} {...review} />\n        ))}\n      </Marquee>\n      <Marquee reverse pauseOnHover className='[--duration:20s]'>\n        {secondRow.map((review) => (\n          <ReviewCard key={review.username} {...review} />\n        ))}\n      </Marquee>\n      <svg\n        className='absolute top-0 left-0 z-2 w-full h-full mix-blend-overlay opacity-50'\n        xmlns='http://www.w3.org/2000/svg'\n      >\n        <defs>\n          <filter id='noise6'>\n            <feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' />\n          </filter>\n        </defs>\n        <rect width='100%' height='100%' filter='url(#noise6)' />\n      </svg>\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 MarqueeDemo;\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"
}