Clerk and Convex Implementation Using Server Components

"use client";
import Link from "next/link";
import { SignInButton, SignOutButton, SignUpButton } from "@clerk/clerk-react";
import { useConvexAuth } from "convex/react";

const Header = () => {
    const { isAuthenticated, isLoading } = useConvexAuth();
    return (
        <header className="flex h-20 w-full shrink-0 items-center container">
            <Link className="mr-auto" href="/">
                Home
            </Link>
            <nav className="hidden lg:flex space-x-4">
                <Link className="text-lg font-semibold hover:underline" href="/today">
                    Today&apos;s Questions
                </Link>
                <Link className="text-lg font-semibold hover:underline" href="/browse">
                    Browse
                </Link>
                {isAuthenticated && !isLoading && (
                    <>
                        <Link className="text-lg font-semibold hover:underline" href="/ask">
                            Ask a Question
                        </Link>
                        <SignOutButton />
                    </>
                )}
                {!isAuthenticated && !isLoading && (<><SignInButton />
                    <SignUpButton /></>)}
                {isLoading && <p>Loading...</p>}
            </nav>
        </header>

    )
}

export default Header;