Misc demo improvements

haydenbleasel · Jan 27, 2025 · 7df9393 · 7df9393
1 parent 5a5c61c
commit 7df9393
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/apps/docs/content/docs/marquee.mdx b/apps/docs/content/docs/marquee.mdx
@@ -21,15 +21,15 @@ import {
 } from '@/components/ui/kibo-ui/marquee';
 
 const Example = () => (
-  <div className="py-4">
+  <div className="h-screen w-full flex items-center justify-center">
     <Marquee>
       <MarqueeFade side="left" />
       <MarqueeFade side="right" />
       <MarqueeContent>
         {new Array(10).fill(null).map((_, index) => (
-          <MarqueeItem key={index} className="w-16 h-16">
+          <MarqueeItem key={index} className="w-32 h-32">
             <img
-              src={\`https://placehold.co/64x64?random=\${index}\`}
+              src={\`https://placehold.co/128x128?random=\${index}\`}
               alt={\`Image \${index}\`}
               className="rounded-full overflow-hidden"
             />

diff --git a/apps/docs/public/registry/marquee.json b/apps/docs/public/registry/marquee.json
@@ -13,7 +13,7 @@
     {
       "type": "registry:ui",
       "path": "index.tsx",
-      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport type { HTMLAttributes } from 'react';\nimport FastMarquee from 'react-fast-marquee';\nimport type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';\n\nexport type MarqueeProps = HTMLAttributes<HTMLDivElement>;\n\nexport const Marquee = ({ className, ...props }: MarqueeProps) => (\n  <div className={cn('relative', className)} {...props} />\n);\n\nexport type MarqueeContentProps = FastMarqueeProps;\n\nexport const MarqueeContent = ({\n  loop = 0,\n  autoFill = true,\n  pauseOnHover = true,\n  ...props\n}: MarqueeContentProps) => (\n  <FastMarquee\n    loop={loop}\n    autoFill={autoFill}\n    pauseOnHover={pauseOnHover}\n    {...props}\n  />\n);\n\nexport type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {\n  side: 'left' | 'right';\n};\n\nexport const MarqueeFade = ({\n  className,\n  side,\n  ...props\n}: MarqueeFadeProps) => (\n  <div\n    className={cn(\n      'absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent',\n      side === 'left' ? 'left-0 bg-gradient-to-r' : 'right-0 bg-gradient-to-l',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;\n\nexport const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (\n  <div\n    className={cn('mx-2 flex-shrink-0 object-contain', className)}\n    {...props}\n  />\n);\n",
+      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport type { HTMLAttributes } from 'react';\nimport FastMarquee from 'react-fast-marquee';\nimport type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';\n\nexport type MarqueeProps = HTMLAttributes<HTMLDivElement>;\n\nexport const Marquee = ({ className, ...props }: MarqueeProps) => (\n  <div\n    className={cn('relative w-full overflow-hidden', className)}\n    {...props}\n  />\n);\n\nexport type MarqueeContentProps = FastMarqueeProps;\n\nexport const MarqueeContent = ({\n  loop = 0,\n  autoFill = true,\n  pauseOnHover = true,\n  ...props\n}: MarqueeContentProps) => (\n  <FastMarquee\n    loop={loop}\n    autoFill={autoFill}\n    pauseOnHover={pauseOnHover}\n    {...props}\n  />\n);\n\nexport type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {\n  side: 'left' | 'right';\n};\n\nexport const MarqueeFade = ({\n  className,\n  side,\n  ...props\n}: MarqueeFadeProps) => (\n  <div\n    className={cn(\n      'absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent',\n      side === 'left' ? 'left-0 bg-gradient-to-r' : 'right-0 bg-gradient-to-l',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;\n\nexport const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (\n  <div\n    className={cn('mx-2 flex-shrink-0 object-contain', className)}\n    {...props}\n  />\n);\n",
       "target": "components/ui/kibo-ui/marquee.tsx"
     }
   ]

diff --git a/packages/marquee/index.tsx b/packages/marquee/index.tsx
@@ -8,7 +8,10 @@ import type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';
 export type MarqueeProps = HTMLAttributes<HTMLDivElement>;
 
 export const Marquee = ({ className, ...props }: MarqueeProps) => (
-  <div className={cn('relative', className)} {...props} />
+  <div
+    className={cn('relative w-full overflow-hidden', className)}
+    {...props}
+  />
 );
 
 export type MarqueeContentProps = FastMarqueeProps;