Update src/components/ui/NavbarDropdown.tsx

src/components/ui/NavbarDropdown.tsx

@@ -1,109 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "motion/react";
-import { ArrowUpRight } from "lucide-react";
-import { cls } from "@/lib/utils";
-import Button from "@/components/ui/Button";
-
-interface NavbarDropdownProps {
-  logo: string;
-  navItems: { name: string; href: string }[];
-  ctaButton: { text: string; href: string };
-}
-
-const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, onClose?: () => void) => {
-  if (href.startsWith("#")) {
-    e.preventDefault();
-    const element = document.getElementById(href.slice(1));
-    element?.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
-  onClose?.();
-};
-
-const NavbarDropdown = ({ logo, navItems, ctaButton }: NavbarDropdownProps) => {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const navRef = useRef<HTMLElement>(null);
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && menuOpen) setMenuOpen(false);
-    };
-    const handleClickOutside = (e: MouseEvent) => {
-      if (menuOpen && navRef.current && !navRef.current.contains(e.target as Node)) {
-        setMenuOpen(false);
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [menuOpen]);
-
-  return (
-    <nav ref={navRef} className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
-      <div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded backdrop-blur-sm card">
-        <a href="/" className="pl-2 text-xl font-medium text-foreground">{logo}</a>
-
-        <div className="flex items-center gap-2 xl:gap-3 2xl:gap-4">
-          <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} />
-
-          <button
-            className="relative flex items-center justify-center size-9 rounded cursor-pointer primary-button"
-            onClick={() => setMenuOpen(!menuOpen)}
-            aria-label="Toggle menu"
-            aria-expanded={menuOpen}
-          >
-            <span
-              className={cls(
-                "absolute w-3 h-px bg-primary-cta-text transition-all duration-300",
-                menuOpen ? "rotate-45" : "-translate-y-1"
-              )}
-            />
-            <span
-              className={cls(
-                "absolute w-3 h-px bg-primary-cta-text transition-all duration-300",
-                menuOpen ? "-rotate-45" : "translate-y-1"
-              )}
-            />
-          </button>
-        </div>
-      </div>
-
-      <AnimatePresence>
-        {menuOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -10 }}
-            transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
-            className="absolute top-full right-2 xl:right-3 2xl:right-4 -mt-1 px-4 py-1 w-3/4 md:w-3/10 2xl:w-25/100 rounded primary-button"
-          >
-            {navItems.map((item, index) => (
-              <div key={item.name}>
-                <a
-                  href={item.href}
-                  onClick={(e) => handleNavClick(e, item.href, () => setMenuOpen(false))}
-                  className="group flex items-center justify-between py-3 w-full"
-                >
-                  <span className="text-base text-primary-cta-text group-hover:ml-2 transition-[margin] duration-300">
-                    {item.name}
-                  </span>
-                  <ArrowUpRight
-                    className="h-(--text-base) w-auto text-primary-cta-text group-hover:rotate-45 group-hover:mr-2 transition-all duration-300"
-                    strokeWidth={1.75}
-                  />
-                </a>
-                {index < navItems.length - 1 && (
-                  <div className="h-px bg-primary-cta-text/20" />
-                )}
-              </div>
-            ))}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </nav>
-  );
-};
-
-export default NavbarDropdown;