1import { CloudAuthBoundary } from "../../cloud/CloudAuthBoundary";
2import { activateCloudAuthentication } from "../../cloud/activation";
3import { UserButton, useAuth } from "@clerk/react";
4import { LogInIcon } from "lucide-react";
5
6import { hasCloudPublicConfig } from "../../cloud/publicConfig";
7import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
8import { T3_CONNECT_ACCOUNT_PAGES } from "./T3ConnectAccountPages";
9import { useT3ConnectAuthPrompt } from "./useT3ConnectAuthPrompt";
10
11export function T3ConnectSidebarSignIn() {
12 if (!hasCloudPublicConfig()) return null;
13
14 return (
15 <CloudAuthBoundary
16 fallback={
17 <SidebarMenu>
18 <SidebarMenuItem>
19 <SidebarMenuButton onClick={() => activateCloudAuthentication(true)}>
20 <LogInIcon />
21 <span>Sign in to T3 Connect</span>
22 </SidebarMenuButton>
23 </SidebarMenuItem>
24 </SidebarMenu>
25 }
26 >
27 <ConfiguredT3ConnectSidebarSignIn />
28 </CloudAuthBoundary>
29 );
30}
31
32export function T3ConnectSidebarAvatar() {
33 if (!hasCloudPublicConfig()) return null;
34
35 return (
36 <CloudAuthBoundary>
37 <ConfiguredT3ConnectSidebarAvatar />
38 </CloudAuthBoundary>
39 );
40}
41
42function ConfiguredT3ConnectSidebarAvatar() {
43 const { isLoaded, isSignedIn } = useAuth();
44
45 if (!isLoaded || !isSignedIn) return null;
46
47 return (
48 <UserButton
49 appearance={{
50 elements: {
51 avatarBox: "size-7",
52 userButtonTrigger: "rounded-lg p-1 hover:bg-sidebar-row-hover",
53 },
54 }}
55 >
56 {T3_CONNECT_ACCOUNT_PAGES.map((page) => (
57 <UserButton.UserProfilePage
58 key={page.url}
59 label={page.label}
60 labelIcon={page.icon}
61 url={page.url}
62 >
63 {page.content}
64 </UserButton.UserProfilePage>
65 ))}
66 </UserButton>
67 );
68}
69
70function ConfiguredT3ConnectSidebarSignIn() {
71 const { isLoaded, isSignedIn } = useAuth();
72 const { authPrompt, openAuthPrompt } = useT3ConnectAuthPrompt();
73
74 if (!isLoaded || isSignedIn) return null;
75
76 return (
77 <>
78 <SidebarMenu>
79 <SidebarMenuItem>
80 <SidebarMenuButton onClick={openAuthPrompt}>
81 <LogInIcon />
82 <span>Sign in to T3 Connect</span>
83 </SidebarMenuButton>
84 </SidebarMenuItem>
85 </SidebarMenu>
86 {authPrompt}
87 </>
88 );
89}