Marquee

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { Snippet } from "svelte";
4 
5	interface MarqueeProps {
6		children: Snippet;
7		class?: string;
8		reverse?: boolean;
9		pauseOnHover?: boolean;
10		vertical?: boolean;
11		repeat?: number;
12		[key: string]: any;
13	}
14 
15	let {
16		children,
17		class: className = "",
18		reverse = false,
19		pauseOnHover = false,
20		vertical = false,
21		repeat = 4,
22		...rest
23	}: MarqueeProps = $props();
24</script>
25 
26<div
27	{...rest}
28	class={cn(
29		"group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
30		{
31			"flex-row": !vertical,
32			"flex-col": vertical,
33		},
34		className
35	)}
36>
37	{#each Array(repeat).fill(0) as _, i (i)}
38		<div
39			class={cn("flex shrink-0 justify-around gap-(--gap)", {
40				"animate-marquee flex-row": !vertical,
41				"animate-marquee-vertical flex-col": vertical,
42				"group-hover:paused": pauseOnHover,
43				"direction-[reverse]": reverse,
44			})}
45		>
46			{@render children?.()}
47		</div>
48	{/each}
49</div>