marquee

1import { cn } from "@/lib/utils"
2 
3interface MarqueeProps {
4  className?: string
5  reverse?: boolean
6  pauseOnHover?: boolean
7  children?: React.ReactNode
8  vertical?: boolean
9  repeat?: number
10  [key: string]: unknown
11}
12 
13export function Marquee({
14  className,
15  reverse,
16  pauseOnHover = false,
17  children,
18  vertical = false,
19  repeat = 4,
20  ...props
21}: MarqueeProps) {
22  return (
23    <div
24      {...props}
25      className={cn(
26        "group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
27        {
28          "flex-row": !vertical,
29          "flex-col": vertical,
30        },
31        className
32      )}
33    >
34      {Array(repeat)
35        .fill(0)
36        .map((_, i) => (
37          <div
38            key={i}
39            className={cn("flex shrink-0 justify-around [gap:var(--gap)]", {
40              "animate-marquee flex-row": !vertical,
41              "animate-marquee-vertical flex-col": vertical,
42              "group-hover:[animation-play-state:paused]": pauseOnHover,
43              "[animation-direction:reverse]": reverse,
44            })}
45          >
46            {children}
47          </div>
48        ))}
49    </div>
50  )
51}