client_side_example_navbar.tsx

import React from 'react';

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

const Navbar = () => {
   const t = useTranslations('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>
        // rest of the code...
      </nav>
    </header>
  );
};

export default Navbar;