Floating Navbar

"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

export function FloatingNav({ items }: {
  items: { name: string; href: string }[];
}) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    let last = 0;
    function onScroll() {
      const y = window.scrollY;
      setVisible(y > 100 && y < last);
      last = y;
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <AnimatePresence>
      {visible && (
        <motion.nav
          initial={{ y: -80, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: -80, opacity: 0 }}
          transition={{ duration: 0.3, ease: "easeOut" }}
          className="fixed inset-x-0 top-4 z-50 mx-auto flex max-w-md items-center justify-center gap-6 rounded-full border border-white/10 bg-black/60 px-8 py-3 shadow-2xl backdrop-blur-lg"
        >
          {items.map((item) => (
            <a
              key={item.href}
              href={item.href}
              className="text-sm text-neutral-300 transition hover:text-white"
            >
              {item.name}
            </a>
          ))}
        </motion.nav>
      )}
    </AnimatePresence>
  );
}