Infinite Marquee

1"use client";
2
3import {
4  Card,
5  CardContent,
6  CardDescription,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { InfiniteMarquee, type Logo, PropsVisualiser } from "@/registry/ui";
11
12const DEMO_LOGOS: Logo[] = [
13  {
14    src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg",
15    alt: "React",
16  },
17  {
18    src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nextjs/nextjs-original.svg",
19    alt: "Next.js",
20  },
21  {
22    src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg",
23    alt: "TypeScript",
24  },
25  {
26    src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg",
27    alt: "Tailwind CSS",
28  },
29  {
30    src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/nodejs/nodejs-original.svg",
31    alt: "Node.js",
32  },
33  {
34    src: "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/figma/figma-original.svg",
35    alt: "Figma",
36  },
37];
38
39type InfiniteMarqueeExampleProps = {
40  speed: "slow" | "normal" | "fast";
41  pauseOnHover: boolean;
42  scaleOnHover: boolean;
43  imageWidth: number;
44};
45
46export function InfiniteMarqueeExample() {
47  return (
48    <PropsVisualiser
49      title="Infinite Marquee"
50      schema={[
51        {
52          key: "speed",
53          label: "Speed",
54          type: "select",
55          defaultValue: "normal",
56          options: [
57            { label: "Slow", value: "slow" },
58            { label: "Normal", value: "normal" },
59            { label: "Fast", value: "fast" },
60          ],
61        },
62        {
63          key: "pauseOnHover",
64          label: "Pause on hover",
65          type: "boolean",
66          defaultValue: true,
67        },
68        {
69          key: "scaleOnHover",
70          label: "Scale on hover",
71          type: "boolean",
72          defaultValue: true,
73        },
74        {
75          key: "imageWidth",
76          label: "Logo width",
77          type: "number",
78          min: 32,
79          max: 120,
80          step: 4,
81          defaultValue: 60,
82        },
83      ]}
84      render={(props: InfiniteMarqueeExampleProps) => (
85        <div className="w-full max-w-4xl space-y-6">
86          <Card className="border-border/80 bg-background/90 shadow-sm">
87            <CardHeader className="text-center">
88              <CardTitle className="text-xl md:text-2xl">
89                Trusted by product teams
90              </CardTitle>
91              <CardDescription>
92                Pass your own <code className="text-foreground">logos</code>{" "}
93                array - the marquee duplicates the strip for a seamless loop.
94              </CardDescription>
95            </CardHeader>
96            <CardContent className="rounded-xl border border-border/60 bg-muted/20 px-2 py-4">
97              <InfiniteMarquee
98                key={`${props.speed}-${props.pauseOnHover}-${props.scaleOnHover}-${props.imageWidth}`}
99                logos={DEMO_LOGOS}
100                speed={props.speed}
101                pauseOnHover={props.pauseOnHover}
102                scaleOnHover={props.scaleOnHover}
103                imageWidth={props.imageWidth}
104              />
105            </CardContent>
106          </Card>
107        </div>
108      )}
109    />
110  );
111}