40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
interface MarqueeStripProps {
|
|
text?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export function MarqueeStrip({
|
|
text = "Artificial Intelligence",
|
|
className = "",
|
|
}: MarqueeStripProps) {
|
|
const marqueeItems = Array.from({ length: 6 });
|
|
|
|
return (
|
|
<div
|
|
className={`relative z-10 mx-[-5px] mb-[-20px] mt-0 overflow-hidden bg-gradient-to-r from-tenext-teal to-tenext-blue py-[42px] ${className}`}
|
|
style={{ transform: "rotate(-2.07deg)" }}
|
|
>
|
|
<div className="marquee-track flex w-max whitespace-nowrap">
|
|
{[0, 1].map((track) => (
|
|
<div key={track} className="flex shrink-0 items-center">
|
|
{marqueeItems.map((_, i) => (
|
|
<div
|
|
key={`${track}-${i}`}
|
|
className="flex items-center gap-8 pr-8"
|
|
>
|
|
<span
|
|
className="marquee-text text-white"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
{text}
|
|
</span>
|
|
<span className="flex h-3 w-3 rounded-full bg-white opacity-50" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|