feat(header): enhance Header component with loading state and user authentication buttons

refactor(Home): replace anchor tags with Link components for navigation

app/components/header.tsx

@@ -1,9 +1,35 @@
 "use client";
 
 import Link from "next/link";
-import { LogoutButton } from "./authButtons";
+import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
+import { LoginButton, RegisterButton, LogoutButton } from "./authButtons";
 
 export function Header() {
+  const { user, isLoading } = useKindeBrowserClient();
+
+  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>
+    );
+  }
+
   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">
@@ -18,7 +44,14 @@ export function Header() {
             </Link>
           </div>
           <div className="flex items-center space-x-4">
-            <LogoutButton />
+            {!user ? (
+              <>
+                <LoginButton />
+                <RegisterButton />
+              </>
+            ) : (
+              <LogoutButton />
+            )}
           </div>
         </div>
       </div>

app/files/page.tsx

@@ -26,14 +26,6 @@ export default function FilesPage() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/vtorio.svg"
-          alt="Vtor.io logo"
-          width={180}
-          height={38}
-          priority
-        />
         
         <h1 className="text-3xl font-bold text-center sm:text-left">
           File Management

app/page.tsx

@@ -1,16 +1,11 @@
 import Image from "next/image";
-import { LoginButton, RegisterButton } from "@/app/components/authButtons";
+import Link from "next/link";
 
 export default function Home() {
   return (
     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <LoginButton />
-          <RegisterButton />
-        </div>
-
         <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
           <li className="mb-2">
             Site coming soon, written in{" "}
@@ -23,7 +18,7 @@ export default function Home() {
         </ol>
 
         <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
+          <Link
             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"
             href="https://request.vixflix.online/"
             target="_blank"
@@ -37,8 +32,8 @@ export default function Home() {
               height={20}
             />
             Go to VixFlixOnline
-          </a>
-          <a
+          </Link>
+          <Link
             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"
             href="/api-docs"
           >
@@ -50,8 +45,8 @@ export default function Home() {
               height={20}
             />
             API Documentation
-          </a>
-          <a
+          </Link>
+          <Link
             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"
             href="/files"
           >
@@ -63,7 +58,7 @@ export default function Home() {
               height={20}
             />
             Upload Files
-          </a>
+          </Link>
         </div>
       </main>
     </div>