feat(header): update Header component to use client-side authentication and display user avatar

feat(next.config): add remote image patterns for Gravatar in Next.js configuration
refactor(page): remove unused Image import from FilesPage component

app/components/header.tsx

@@ -1,9 +1,13 @@
+"use client";
+
 import Link from "next/link";
-import { getKindeServerSession, LoginLink, LogoutLink } from "@kinde-oss/kinde-auth-nextjs/server";
+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 async function Header() {
-  const { isAuthenticated } = getKindeServerSession();
-  const isLoggedIn = await isAuthenticated();
+export default function Header() {
+  const { isAuthenticated, getUser } = useKindeBrowserClient();
+  const user = getUser();
 
   return (
     <header className="border-b border-gray-200 bg-white">
@@ -19,13 +23,25 @@ export default async function Header() {
             </Link>
           </div>
           <div className="flex items-center space-x-4">
-            {!isLoggedIn && 
+            {!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>
             }
-            { isLoggedIn &&
+            { 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

app/files/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { UploadForm } from "../components/uploadForm";
 import { FilesTable } from "../components/filesTable";

next.config.ts

@@ -2,6 +2,16 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'gravatar.com',
+        port: '',
+        pathname: '/avatar/**',
+      },
+    ],
+  },
   async rewrites() {
     return [
       {