xlibs-components/dist/components/aceternity/floating-nav.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, AnimatePresence, useScroll, useMotionValueEvent, } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const FloatingNav = ({ navItems, className, }) => {
    const { scrollYProgress } = useScroll();
    const [visible, setVisible] = useState(false);
    useMotionValueEvent(scrollYProgress, "change", (current) => {
        // Check if current is not undefined and is a number
        if (typeof current === "number") {
            let direction = current - scrollYProgress.getPrevious();
            if (scrollYProgress.get() < 0.05) {
                setVisible(false);
            }
            else {
                if (direction < 0) {
                    setVisible(true);
                }
                else {
                    setVisible(false);
                }
            }
        }
    });
    return (_jsx(AnimatePresence, { mode: "wait", children: _jsxs(motion.div, { initial: {
                opacity: 1,
                y: -100,
            }, animate: {
                y: visible ? 0 : -100,
                opacity: visible ? 1 : 0,
            }, transition: {
                duration: 0.2,
            }, className: cn("flex max-w-fit  fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full dark:bg-black bg-white shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-2 pl-8 py-2  items-center justify-center space-x-4", className), children: [navItems.map((navItem, idx) => (_jsxs("a", { href: navItem.link, className: cn("relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"), children: [_jsx("span", { className: "block sm:hidden", children: navItem.icon }), _jsx("span", { className: "hidden sm:block text-sm", children: navItem.name })] }, `link=${idx}`))), _jsxs("button", { className: "border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-black dark:text-white px-4 py-2 rounded-full", children: [_jsx("span", { children: "Login" }), _jsx("span", { className: "absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent  h-px" })] })] }) }));
};