floating-navbar

1"use client";
2import React, { useState } from "react";
3import {
4  motion,
5  AnimatePresence,
6  useScroll,
7  useMotionValueEvent,
8} from "motion/react";
9import { cn } from "@/lib/utils";
10 
11export const FloatingNav = ({
12  navItems,
13  className,
14}: {
15  navItems: {
16    name: string;
17    link: string;
18    icon?: JSX.Element;
19  }[];
20  className?: string;
21}) => {
22  const { scrollYProgress } = useScroll();
23  const [visible, setVisible] = useState(false);
24 
25  useMotionValueEvent(scrollYProgress, "change", (current) => {
26    if (typeof current === "number") {
27      const direction = current - scrollYProgress.getPrevious()!;
28 
29      if (scrollYProgress.get() < 0.05) {
30        setVisible(false);
31      } else {
32        if (direction < 0) {
33          setVisible(true);
34        } else {
35          setVisible(false);
36        }
37      }
38    }
39  });
40 
41  return (
42    <AnimatePresence mode="wait">
43      <motion.div
44        initial={{
45          opacity: 1,
46          y: -100,
47        }}
48        animate={{
49          y: visible ? 0 : -100,
50          opacity: visible ? 1 : 0,
51        }}
52        transition={{
53          duration: 0.2,
54        }}
55        className={cn(
56          "flex max-w-fit fixed top-10 inset-x-0 mx-auto z-[5000] items-center justify-center",
57          className
58        )}
59      >
60        <div className="flex items-center justify-center gap-2 rounded-full border border-white/10 bg-white/80 px-2 py-1.5 shadow-lg shadow-black/10 backdrop-blur-md dark:border-white/10 dark:bg-black/50">
61          {/* Nav items container */}
62          <div className="flex items-center gap-1">
63            {navItems.map((navItem, idx: number) => (
64              <a
65                key={`link-${idx}`}
66                href={navItem.link}
67                className={cn(
68                  "relative flex items-center gap-1 rounded-full px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-white/10 dark:hover:text-white"
69                )}
70              >
71                <span className="block sm:hidden">{navItem.icon}</span>
72                <span className="hidden sm:block">{navItem.name}</span>
73              </a>
74            ))}
75          </div>
76 
77          {/* Divider */}
78          <div className="h-5 w-px bg-neutral-200 dark:bg-white/10" />
79 
80          {/* CTA Button */}
81// … truncated