Function UserAccountDropDown

apps/web/components/UserAccountDropDown.tsx:27–116

()

];

export default function UserAccountDropDown() {
  const { data: session, status } = useSession();
  const user = session?.user;
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted || status === "loading") return null;
  if (!user) return null;

  return (
    <DropdownMenu onOpenChange={setIsOpen}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="bg-secondary/15 hover:bg-secondary/25 flex items-center gap-2 rounded-xl px-3 py-2 shadow-sm transition-all duration-200 hover:shadow-md"
        >
          <div className="border-primary/20 h-8 w-8 overflow-hidden rounded-full border-2">
            {user.image ? (
              <UserImage image={user.image} />
            ) : (
              <div className="from-primary-400 to-primary-600 flex h-full w-full items-center justify-center bg-gradient-to-br text-white">
                <UserRound size={16} />
              </div>
            )}
          </div>
        </Button>
      </DropdownMenuTrigger>

      <AnimatePresence>
        {isOpen && (
          <DropdownMenuContent
            forceMount
            className="bg-secondary/15 border-primary/10 rounded-2xl border p-2 shadow-lg shadow-neutral-600/5 backdrop-blur-lg"
            align="end"
          >
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.2 }}
            >
              <DropdownMenuLabel className="flex items-center space-x-3 p-3">
                <div className="border-primary/20 h-12 w-12 overflow-hidden rounded-full border-2">
                  {user.image ? (
                    <UserImage image={user.image} />
                  ) : (
                    <div className="from-primary-400 to-primary-600 flex h-full w-full items-center justify-center bg-gradient-to-br text-white">
                      <UserRound size={24} />
                    </div>
                  )}
                </div>
                <div className="flex flex-col">
                  <span className="text-foreground font-semibold">{user.name}</span>