tm-landing/app/_components/NavigationBar.tsx

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

const NavigationBar = ({ host }: { host: string }) => {
  const pathname = usePathname();

  return (
    <nav className="my-5">
      <ul className="flex flex-row-reverse items-center gap-12">
        <li>
          <Link
            href={`https://app.${host}`}
            className="cursor-pointer bg-(--primary) text-white py-5 px-12 rounded-full"
            target="_blank">
            Login
          </Link>
        </li>
        <li>
          <Link
            href="/contact-us"
            className={`py-5 rounded-full ${
              pathname === "/contact-us" && "text-(--primary) font-semibold"
            }`}>
            Contact us
          </Link>
        </li>
        <li>
          <Link
            href="/"
            className={`py-5 rounded-full ${
              pathname === "/" && "text-(--primary) font-semibold"
            }`}>
            Home
          </Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavigationBar;