xlibs-components/dist/components/aceternity/sticky-banner.js

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

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { motion, useMotionValueEvent, useScroll } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const StickyBanner = ({ className, children, hideOnScroll = false, }) => {
    const [open, setOpen] = useState(true);
    const { scrollY } = useScroll();
    useMotionValueEvent(scrollY, "change", (latest) => {
        console.log(latest);
        if (hideOnScroll && latest > 40) {
            setOpen(false);
        }
        else {
            setOpen(true);
        }
    });
    return (_jsxs(motion.div, { className: cn("sticky inset-x-0 top-0 z-40 flex min-h-14 w-full items-center justify-center bg-transparent px-4 py-1", className), initial: {
            y: -100,
            opacity: 0,
        }, animate: {
            y: open ? 0 : -100,
            opacity: open ? 1 : 0,
        }, transition: {
            duration: 0.3,
            ease: "easeInOut",
        }, children: [children, _jsx(motion.button, { initial: {
                    scale: 0,
                }, animate: {
                    scale: 1,
                }, className: "absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer", onClick: () => setOpen(!open), children: _jsx(CloseIcon, { className: "h-5 w-5 text-white" }) })] }));
};
const CloseIcon = (props) => {
    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M18 6l-12 12" }), _jsx("path", { d: "M6 6l12 12" })] }));
};