This repository was archived by the owner on Mar 24, 2026. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathmarquee.tsx
More file actions
53 lines (51 loc) · 1.16 KB
/
marquee.tsx
File metadata and controls
53 lines (51 loc) · 1.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { cn } from '@/lib/utils';
interface MarqueeProps {
className?: string;
reverse?: boolean;
pauseOnHover?: boolean;
children?: React.ReactNode;
vertical?: boolean;
repeat?: number;
style?: React.CSSProperties;
'aria-label'?: string;
}
export default function Marquee({
className,
reverse,
pauseOnHover: _pauseOnHover = false,
children,
vertical = false,
repeat = 4,
...props
}: MarqueeProps) {
return (
<div
{...props}
className={cn(
'flex overflow-hidden p-2 gap-4',
{
'flex-row': !vertical,
'flex-col': vertical,
},
className
)}
>
{Array(repeat)
.fill(0)
.map((_, i) => (
<div
key={i}
className={cn('flex shrink-0 justify-around gap-4', {
'animate-marquee flex-row hover:[animation-play-state:paused]':
!vertical,
'animate-marquee-vertical flex-col hover:[animation-play-state:paused]':
vertical,
'[animation-direction:reverse]': reverse,
})}
>
{children}
</div>
))}
</div>
);
}