refactor(header): replace auth buttons with server-side authentication links

app/components/authButtons.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
-import Link from "next/link";
-
-export function LoginButton() {
-  return (
-    <Link
-      href="/api/auth/login"
-      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
-    </Link>
-  );
-}
-
-export function LogoutButton() {
-  const { user } = useKindeBrowserClient();
-  
-  if (!user) return null;
-  
-  return (
-    <a
-      href="/api/auth/logout"
-      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
-    </a>
-  );
-}
-
-export function RegisterButton() {
-  return (
-    <Link
-      href="/api/auth/register"
-      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"
-    >
-      Register
-    </Link>
-  );
-}
-
-export function UserInfo() {
-  const { user, isLoading } = useKindeBrowserClient();
-  
-  if (isLoading) return <div>Loading...</div>;
-  
-  if (!user) return null;
-  
-  return (
-    <div className="text-sm text-center sm:text-left">
-      <p>Welcome, {user.given_name || user.email}!</p>
-    </div>
-  );
-}

app/components/header.tsx

@@ -1,34 +1,9 @@
-"use client";
-
 import Link from "next/link";
-import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
-import { LoginButton, RegisterButton, LogoutButton } from "./authButtons";
-
-export function Header() {
-  const { user, isLoading } = useKindeBrowserClient();
+import { getKindeServerSession, LoginLink, LogoutLink } from "@kinde-oss/kinde-auth-nextjs/server";
 
-  if (isLoading) {
-    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">
-              <div className="h-10 w-20 bg-gray-200 rounded animate-pulse"></div>
-            </div>
-        </div>
-      </div>
-    </header>
-    );
-  }
+export default async function Header() {
+  const { isAuthenticated } = getKindeServerSession();
+  const isLoggedIn = await isAuthenticated();
 
   return (
     <header className="border-b border-gray-200 bg-white">
@@ -44,14 +19,18 @@ export function Header() {
             </Link>
           </div>
           <div className="flex items-center space-x-4">
-            {!user ? (
-              <>
-                <LoginButton />
-                <RegisterButton />
-              </>
-            ) : (
-              <LogoutButton />
-            )}
+            {!isLoggedIn && 
+              <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>
+            }
+            { isLoggedIn &&
+              <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>

app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Providers } from "./providers";
-import { Header } from "./components/header";
+import Header from "./components/header";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",