import { UserButton, useAuth } from "@clerk/react";import { LogInIcon, ServerIcon, SmartphoneIcon } from "lucide-react"; import { hasCloudPublicConfig } from "../../cloud/publicConfig";import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";import { MobileClientsUserProfilePage } from "./MobileClientsUserProfilePage";import { T3ConnectUserProfilePage } from "./T3ConnectUserProfilePage";import { useT3ConnectAuthPrompt } from "./useT3ConnectAuthPrompt"; export function T3ConnectSidebarSignIn() {  if (!hasCloudPublicConfig()) return null;   return <ConfiguredT3ConnectSidebarSignIn />;} export function T3ConnectSidebarAvatar() {  if (!hasCloudPublicConfig()) return null;   return <ConfiguredT3ConnectSidebarAvatar />;} function ConfiguredT3ConnectSidebarAvatar() {  const { isLoaded, isSignedIn } = useAuth();   if (!isLoaded || !isSignedIn) return null;   return (    <UserButton      appearance={{        elements: {          avatarBox: "size-7",          userButtonTrigger: "rounded-lg p-1 hover:bg-sidebar-row-hover",        },      }}    >      <UserButton.UserProfilePage        label="Mobile clients"        labelIcon={<SmartphoneIcon className="size-4" />}        url="mobile-clients"      >        <MobileClientsUserProfilePage />      </UserButton.UserProfilePage>      <UserButton.UserProfilePage        label="T3 Connect"        labelIcon={<ServerIcon className="size-4" />}        url="t3-connect"      >        <T3ConnectUserProfilePage />      </UserButton.UserProfilePage>    </UserButton>  );} function ConfiguredT3ConnectSidebarSignIn() {  const { isLoaded, isSignedIn } = useAuth();  const { authPrompt, openAuthPrompt } = useT3ConnectAuthPrompt();   if (!isLoaded || isSignedIn) return null;   return (    <>      <SidebarMenu>        <SidebarMenuItem>          <SidebarMenuButton onClick={openAuthPrompt}>            <LogInIcon />            <span>Sign in to T3 Connect</span>          </SidebarMenuButton>        </SidebarMenuItem>      </SidebarMenu>      {authPrompt}    </>  );}