xlibs-components/dist/components/magicui/marquee.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from '../../lib/utils.js';
const Marquee = React.forwardRef(({ className, reverse = false, pauseOnHover = false, children, vertical = false, speed = 20, ...props }, ref) => {
    const [isHovered, setIsHovered] = React.useState(false);
    const duration = speed; // seconds
    // Determine the correct animation class
    const getAnimationClass = () => {
        if (vertical) {
            return reverse ? "animate-scroll-vertical-reverse" : "animate-scroll-vertical";
        }
        return reverse ? "animate-scroll-reverse" : "animate-scroll";
    };
    return (_jsx("div", { ref: ref, className: cn("flex overflow-hidden", vertical ? "flex-col" : "flex-row", className), onMouseEnter: () => pauseOnHover && setIsHovered(true), onMouseLeave: () => pauseOnHover && setIsHovered(false), style: {
            "--animation-duration": `${duration}s`,
        }, ...props, children: _jsxs("div", { className: cn("flex", vertical ? "flex-col" : "flex-row", getAnimationClass(), isHovered && "animation-play-state-paused"), children: [children, children, " "] }) }));
});
Marquee.displayName = "Marquee";
export { Marquee };