@smitch/fluid/lib/ticker/Ticker.js

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
var positions = {
    top: 'top-0',
    bottom: 'bottom-0',
};
var durations = {
    top: 'top-0',
    bottom: 'bottom-0',
};
var Ticker = function (_a) {
    var _b = _a.position, position = _b === void 0 ? 'bottom' : _b, _c = _a.duration, duration = _c === void 0 ? 50 : _c, className = _a.className, style = _a.style, children = _a.children;
    var positionClasses = useMemo(function () { return positions[position]; }, [position]);
    var tickerAnimation = {
        animation: "ticker-scroll ".concat(duration, "s linear infinite"),
    };
    return (_jsxs("div", { className: twMerge("ticker group overflow-hidden fixed left-0 w-full bg-dark dark:bg-light text-light dark:text-dark ".concat(positionClasses), className), style: style, children: [_jsx("div", { className: 'ticker-wrapper w-fit', children: _jsx("ul", { className: 'ticker-items flex gap-4 items-center justify-center p-2', style: tickerAnimation, children: children }) }), _jsx("style", { children: "\n                    @keyframes ticker-scroll {\n                        0% {\n                            transform: translate3d(100vw, 0, 0);\n                        }\n                        100% {\n                            transform: translate3d(calc(-100% - 100vw), 0, 0);\n                        }\n                    }\n                " })] }));
};
export default Ticker;
//# sourceMappingURL=Ticker.js.map