leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1import { Avatar } from "components/Avatar";
2import { ActionButton } from "./ActionButton";
3import { useIdentityData } from "components/IdentityProvider";
4import { AccountSmall } from "components/Icons/AccountSmall";
5import { useRecordFromDid } from "src/utils/useRecordFromDid";
6import { useIsMobile } from "src/hooks/isMobile";
7import { LogoutSmall } from "components/Icons/LogoutSmall";
8import { mutate } from "swr";
9import { SpeedyLink } from "components/SpeedyLink";
10import { Popover } from "components/Popover";
11import { Modal } from "components/Modal";
12import { InlineUpgrade } from "app/lish/[did]/[publication]/UpgradeModal";
13import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription";
14import { ManageDomains } from "components/Domains/ManageDomains";
15import { WebSmall } from "components/Icons/WebSmall";
16import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement";
17import { useState } from "react";
18import { LeafletPro } from "components/Icons/LeafletPro";
19
20export const ProfileButton = () => {
21 let { identity } = useIdentityData();
22 let { data: record } = useRecordFromDid(identity?.atp_did);
23 let isMobile = useIsMobile();
24 let isPro = useIsPro();
25 let canSeePro = useCanSeePro();
26
27 return (
28 <Popover
29 asChild
30 side={isMobile ? "top" : "right"}
31 align={isMobile ? "center" : "start"}
32 className="w-xs py-1!"
33 trigger={
34 <ActionButton
35 nav
36 labelOnMobile={false}
37 icon={
38 record ? (
39 <Avatar
40 src={record.avatar}
41 displayName={record.displayName || record.handle}
42 />
43 ) : (
44 <AccountSmall />
45 )
46 }
47 label={record ? record.displayName || record.handle : "Account"}
48 className={`w-full`}
49 />
50 }
51 >
52 <div className="flex flex-col gap-0.5">
53 {record && (
54 <>
55 <SpeedyLink
56 className="no-underline! menuItem -mx-[8px]"
57 href={`/p/${record.handle}`}
58 >
59 <button type="button" className="flex gap-2 ">
60 <AccountSmall />
61 View Profile
62 </button>
63 </SpeedyLink>
64 </>
65 )}
66
67 <ManageDomains />
68 <hr className="border-border-light border-dashed" />
69
70 {canSeePro && isPro && (
71 <>
72 <Modal
73 trigger={
74 <div className="menuItem -mx-[8px] ">
75 <LeafletPro />
76 Manage Pro Subscription
77 </div>
78 }
79 >
80 <ManageProSubscription />
81 </Modal>
82 <hr className="border-border-light border-dashed" />
83 </>
84 )}
85 <button
86 type="button"
87 className="menuItem -mx-[8px] text-left flex items-center gap-2 hover:no-underline!"
88 onClick={async () => {
89 await fetch("/api/auth/logout");
90 mutate("identity", null);
91 }}
92 >
93 <LogoutSmall />
94 Log Out
95 </button>
96 {canSeePro && !isPro && (
97 <>
98 {" "}
99 <hr className="border-border-light border-dashed" />
100 <div className="py-2">
101 <InlineUpgrade />
102 </div>
103 </>
104 )}
105 </div>
106 </Popover>
107 );
108};