Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

// nav.tsx
import Link from "next/link";
import { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
import { Button } from "../ui/button";
import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from "../ui/navigation-menu";
import { SignOut } from "../auth/sign-out";

export async function Navbar(): Promise<JSX.Element> {
    const supabase = createClient();

    const {
        data: { user },
    } = await supabase.auth.getUser();

    const signOut = async (): Promise<void> => {
        "use server";
        await supabase.auth.signOut();

        return redirect("/login");
    };

    return (
        <header className="max-w-screen-2xl mx-auto flex justify-between h-20 w-full shrink-0 items-center px-4 md:px-6">
            <nav className="hidden w-full lg:flex gap-6 justify-between">
                <NavigationMenu className="gap-x-4">
                    {user ? (
                        <NavigationMenuList>
                            <NavigationMenuItem>{JSON.stringify(user.email)}</NavigationMenuItem>
                            <NavigationMenuItem>
                                <SignOut signOut={signOut} />
                            </NavigationMenuItem>
                            <NavigationMenuItem>
                                <Button asChild>
                                    <Link href="/dashboard">Dashboard</Link>
                                </Button>
                            </NavigationMenuItem>
                        </NavigationMenuList>
                    ) : (
                        <NavigationMenuList>
                            <NavigationMenuItem>
                                <Button variant="link" asChild>
                                    <Link href="/auth/login">Log in</Link>
                                </Button>
                            </NavigationMenuItem>
                            <NavigationMenuItem>
                                <Button asChild>
                                    <Link href="/auth/signup">Sign up</Link>
                                </Button>
                            </NavigationMenuItem>
                        </NavigationMenuList>
                    )}
                </NavigationMenu>
            </nav>
        </header>
    );
}

// logout-button.tsx
import { Button } from "../ui/button";

interface ComponentProps {
    signOut: () => void;
}

export function SignOut({ signOut }: ComponentProps): JSX.Element {
    return (
        <Button variant="link" onClick={signOut}>
            Log out
        </Button>
    );
}