82bb0e766e
- Shrink gauge arc (r 80→65) to clearly separate from color band - Replace overflow-hidden with overflow-clip on report preview, score spectrum, and marquee to prevent scroll trapping - Remove overflow-x-clip from report fan so side pages aren't clipped Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import { cn } from "@turbostarter/ui";
|
|
|
|
import type { ComponentPropsWithoutRef } from "react";
|
|
|
|
interface MarqueeProps extends ComponentPropsWithoutRef<"div"> {
|
|
/**
|
|
* Optional CSS class name to apply custom styles
|
|
*/
|
|
className?: string;
|
|
/**
|
|
* Whether to reverse the animation direction
|
|
* @default false
|
|
*/
|
|
reverse?: boolean;
|
|
/**
|
|
* Whether to pause the animation on hover
|
|
* @default false
|
|
*/
|
|
pauseOnHover?: boolean;
|
|
/**
|
|
* Content to be displayed in the marquee
|
|
*/
|
|
children: React.ReactNode;
|
|
/**
|
|
* Whether to animate vertically instead of horizontally
|
|
* @default false
|
|
*/
|
|
vertical?: boolean;
|
|
/**
|
|
* Number of times to repeat the content
|
|
* @default 4
|
|
*/
|
|
repeat?: number;
|
|
}
|
|
|
|
export function Marquee({
|
|
className,
|
|
reverse = false,
|
|
pauseOnHover = false,
|
|
children,
|
|
vertical = false,
|
|
repeat = 4,
|
|
...props
|
|
}: MarqueeProps) {
|
|
return (
|
|
<div
|
|
{...props}
|
|
className={cn(
|
|
"group flex [gap:var(--gap)] overflow-clip p-2 [--duration:40s] [--gap:1rem]",
|
|
{
|
|
"flex-row": !vertical,
|
|
"flex-col": vertical,
|
|
},
|
|
className,
|
|
)}
|
|
>
|
|
{Array(repeat)
|
|
.fill(0)
|
|
.map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={cn(
|
|
"flex shrink-0 items-center justify-around [gap:var(--gap)]",
|
|
{
|
|
"animate-marquee flex-row": !vertical,
|
|
"animate-marquee-vertical flex-col": vertical,
|
|
"group-hover:[animation-play-state:paused]": pauseOnHover,
|
|
"[animation-direction:reverse]": reverse,
|
|
},
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|