vtorio/app/components/header.tsx

"use client";

import Link from "next/link";
import Image from "next/image";
import { LoginLink, LogoutLink } from "@kinde-oss/kinde-auth-nextjs/server";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";

export default function Header() {
  const { isAuthenticated, getUser } = useKindeBrowserClient();
  const user = getUser();

  return (
    <header className="border-b border-gray-200 bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-4">
          <div className="flex items-center">
            <Link href="/" className="flex items-center">
              <img
                src="/vtorio.svg"
                alt="vtor.io"
                className="h-8 w-auto"
              />
            </Link>
          </div>
          <div className="flex items-center space-x-4">
            {!isAuthenticated && 
              <LoginLink
                className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5">
                Login
              </LoginLink>
            }
            { user &&
              <>
                <Image
                  className="rounded-full ml-auto"
                  src={user.picture!}
                  alt="User Avatar"
                  width={35}
                  height={35}
                />
                {user.email}
              </>
            }
            { isAuthenticated &&
              <LogoutLink
                className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5">
                Logout
              </LogoutLink>
            }
          </div>
        </div>
      </div>
    </header>
  );
}