tremor-tracker/src/components/navbar.tsx

"use client";
import { useState } from "react";

import AuthModal from "@/components/AuthModal";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { useMemo } from "react";
import { FaRegUserCircle } from "react-icons/fa";

function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
  const pathname = usePathname();
  const isActive = dropdownItems ? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`) : pathname === href;

  return (
    <button className="flex items-center justify-center px-2 py-4 relative group">
      {dropdownItems ? (
        <span className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}>{name}</span>
      ) : (
        <Link href={href} className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}>
          {name}
        </Link>
      )}
      {dropdownItems && (
        <div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
          <ul>
            {dropdownItems.map((item) => {
              const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
              const isDropdownActive = pathname === itemHref;
              return (
                <li key={item}>
                  <Link href={itemHref} className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}>
                    {item}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </button>
  );
}

export default function Navbar() {
  const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Warehouse", "Shop"], []);
  // const navOptions = useMemo(() => ["Earthquakes"], []);
  const aboutDropdown = ["Our Mission", "The Team", "Contact Us"];
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white">
      <div className="my-1 flex aspect-square ml-3 mr-3">
        <Link href="/" className="rounded-full">
          <Image height={2000} width={2000} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
        </Link>
      </div>
      <div className="flex">
        {navOptions.map((name) => (
          <NavbarButton name={name} href={`/${name.toLowerCase()}`} key={name} />
        ))}
        <NavbarButton name="About Us" href="/about" dropdownItems={aboutDropdown} />
      </div>
      <div className="flex-grow" />
      <button className="my-auto mr-4" onClick={() => setIsModalOpen(true)}>
        <FaRegUserCircle size={22} />
      </button>
      <AuthModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  );
}