example_navbar.tsx

import React from 'react';

import Link from 'next/link';
import { getTranslations } from 'next-intl/server';

const Navbar = async ({ locale }: { locale: string }) => {
  const t = await getTranslations({ locale, namespace: 'components.navbar' });

  return (
    <header className="w-full border-b border-gray-200 bg-white/75 p-4 py-4 shadow-md">
      <nav className="container mx-auto flex w-full items-center justify-between font-semibold">
        <ul className="flex gap-x-8">
          <li>
            <Link href={'/'}>{t('home')}</Link>
          </li>
          <li>
            <Link href={'/about'}>{t('about')}</Link>
          </li>
        </ul>
        <ul className="flex gap-x-3">
          <li>
            <Link
              href={process.env.NEXT_PUBLIC_PT_DOMAIN!}
              className="rounded-md bg-black px-3 py-2 uppercase text-white transition-all hover:opacity-75">
              PT
            </Link>
          </li>
          <li>
            <Link
              href={process.env.NEXT_PUBLIC_EN_DOMAIN!}
              className="rounded-md bg-black px-3 py-2 uppercase text-white transition-all hover:opacity-75">
              EN
            </Link>
          </li>
          <li>
            <Link
              href={process.env.NEXT_PUBLIC_ES_DOMAIN!}
              className="rounded-md bg-black px-3 py-2 uppercase text-white transition-all hover:opacity-75">
              ES
            </Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Navbar;