I want to use the actions in components

[Shyam-Raghuwanshi]

I am trying to logout from the Navbar component

I don't know why the whole navbar got stuck
app/component/navbar

import { Link } from "@remix-run/react"
import InputForm from "./input-form"
import Logo from "./logo"
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "./ui/dropdown-menu"
import { logout } from "~/actions"
import { LogOutIcon } from "lucide-react"

export const action = async () => {
    await logout();
};

export default function Navbar({ userId }: { userId: string | null }) {
    return (
        <div className="flex justify-center md:justify-between h-20 items-center border-b-[1px] px-2 md:px-16">
            <Logo />
            <InputForm />
            <DropdownMenu>
                <DropdownMenuTrigger className="outline-none hidden md:flex">
                    <Avatar>
                        {/* <AvatarImage className="bg-gray-500" src="./User.svg" /> */}
                        <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                </DropdownMenuTrigger>
                <DropdownMenuContent>
                    {!userId ? (<>
                        <DropdownMenuItem><Link to={"/signup"}>Sign up</Link></DropdownMenuItem>
                        <DropdownMenuItem><Link to={"/login"}>Log in</Link></DropdownMenuItem>
                    </>) :
                        <form method="post">
                            <button type="submit" className="block text-center">
                                <LogOutIcon />
                                <br />
                                <span className="text-slate-500 text-xs uppercase font-bold">
                                    Log out
                                </span>
                            </button>
                        </form>
                    }
                    <DropdownMenuItem><Link to={"/login-as-admin"}>Log in as Admin</Link></DropdownMenuItem>
                    {/* <DropdownMenuLabel>My Account</DropdownMenuLabel> */}
                    <DropdownMenuSeparator />
                </DropdownMenuContent>
            </DropdownMenu>
        </div >
    )
}

_index.tsx file where I am using the Navbar component

import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { getAuthFromRequest } from "~/auth/auth";
import BottomNav from "~/components/bottom-nav";
import Navbar from "~/components/navbar";

export const meta: MetaFunction = () => {
  return [
    { title: "BUY N LEASE" },
    { name: "description", content: "Welcome to BUY N LEASE" },
  ];
};

export async function loader({ request }: LoaderFunctionArgs) {
  let auth = await getAuthFromRequest(request);
  return auth;
}


export default function Index() {
  let userId = useLoaderData<typeof loader>();
  return (
    <>
      <Navbar userId={userId} />
      <BottomNav />
    </>
  );
}

[sergiodxa]

Actions are a route feature, you need to export the action from a route file for it to work, you can't use it anywhere else