Marquee component

1"use client";
2 
3import { cn } from "@/lib/utils";
4import React from "react";
5 
6interface MarqueeProps {
7  grayscale?: boolean;
8  direction?: "left" | "right";
9  pauseOnHover?: boolean;
10  fade?: boolean;
11  children?: React.ReactNode;
12  className?: string;
13}
14 
15export default function Marquee({
16  grayscale = false,
17  direction = "left",
18  pauseOnHover = true,
19  fade = true,
20  children,
21  className
22}: MarqueeProps) {
23  const content = React.Children.toArray(children);
24  const containerRef = React.useRef<HTMLDivElement>(null);
25 
26  React.useEffect(() => {
27    const container = containerRef.current;
28    if (!container) return;
29    const preventScroll = (e: Event) => {
30      e.preventDefault();
31      e.stopPropagation();
32      container.scrollLeft = 0;
33    };
34    container.addEventListener("scroll", preventScroll, { passive: false });
35    container.addEventListener("wheel", preventScroll, { passive: false });
36    container.addEventListener("touchmove", preventScroll, { passive: false });
37    return () => {
38      container.removeEventListener("scroll", preventScroll);
39      container.removeEventListener("wheel", preventScroll);
40      container.removeEventListener("touchmove", preventScroll);
41    };
42  }, []);
43 
44  const animationClass =
45    direction === "left" ? "marquee-inner" : "marquee-inner-reverse";
46 
47  return (
48    <div className="relative overflow-hidden">
49      <style jsx global>{`
50        .marquee-container::-webkit-scrollbar {
51          display: none;
52        }
53 
54        .marquee-inner {
55          animation: marquee-anim 20s linear infinite;
56        }
57 
58        .marquee-inner-reverse {
59          animation: marquee-anim-reverse 20s linear infinite;
60        }
61 
62        .marquee-container:hover .marquee-inner,
63        .marquee-container:hover .marquee-inner-reverse {
64          animation-play-state: paused !important;
65        }
66 
67        @keyframes marquee-anim {
68          from {
69            transform: translateX(0);
70          }
71          to {
72            transform: translateX(-50%);
73          }
74        }
75 
76        @keyframes marquee-anim-reverse {
77          from {
78            transform: translateX(-50%);
79          }
80          to {
81            transform: translateX(0);
82          }
83        }
84      `}</style>
85 
86      <div
87        ref={containerRef}
88        className={cn(
89          "flex w-full p-2 [--gap:3rem] select-none cursor-default marquee-container",
90          grayscale &&
91            "grayscale brightness-0 dark:invert opacity-80 transition-opacity",
92// … truncated