yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
2import getAvatar from "@hey/helpers/getAvatar";
3import type { AccountFragment } from "@hey/indexer";
4import { Link } from "react-router";
5import AccountLink from "@/components/Shared/Account/AccountLink";
6import MenuTransition from "@/components/Shared/MenuTransition";
7import Logout from "@/components/Shared/Navbar/NavItems/Logout";
8import Rewards from "@/components/Shared/Navbar/NavItems/Rewards";
9import Settings from "@/components/Shared/Navbar/NavItems/Settings";
10import SwitchAccount from "@/components/Shared/Navbar/NavItems/SwitchAccount";
11import ThemeSwitch from "@/components/Shared/Navbar/NavItems/ThemeSwitch";
12import YourAccount from "@/components/Shared/Navbar/NavItems/YourAccount";
13import { Image } from "@/components/Shared/UI";
14import cn from "@/helpers/cn";
15import { useAccountStore } from "@/store/persisted/useAccountStore";
16
17const SignedAccount = () => {
18 const { currentAccount } = useAccountStore();
19
20 const Avatar = () => (
21 <Image
22 alt={currentAccount?.address}
23 className="size-8 cursor-pointer rounded-full border border-gray-200 dark:border-gray-700"
24 src={getAvatar(currentAccount)}
25 />
26 );
27
28 return (
29 <Menu as="div">
30 <MenuButton>
31 <Avatar />
32 </MenuButton>
33 <MenuTransition>
34 <MenuItems
35 anchor="bottom start"
36 className="z-[5] mt-2 w-48 origin-top-left rounded-xl border border-gray-200 bg-white shadow-xs focus:outline-hidden dark:border-gray-700 dark:bg-black"
37 static
38 >
39 <MenuItem
40 account={currentAccount as AccountFragment}
41 as={AccountLink}
42 className={({ focus }: { focus: boolean }) =>
43 cn({ "dropdown-active": focus }, "menu-item")
44 }
45 >
46 <YourAccount />
47 </MenuItem>
48 <MenuItem
49 as={Link}
50 className={({ focus }: { focus: boolean }) =>
51 cn({ "dropdown-active": focus }, "menu-item")
52 }
53 to="/settings/rewards"
54 >
55 <Rewards />
56 </MenuItem>
57 <MenuItem
58 as={Link}
59 className={({ focus }: { focus: boolean }) =>
60 cn({ "dropdown-active": focus }, "menu-item")
61 }
62 to="/settings"
63 >
64 <Settings />
65 </MenuItem>
66 <div className="divider" />
67 <MenuItem
68 as="div"
69 className={({ focus }) =>
70 cn({ "dropdown-active": focus }, "m-2 rounded-lg")
71 }
72 >
73 <SwitchAccount />
74 </MenuItem>
75 <MenuItem
76 as="div"
77 className={({ focus }) =>
78 cn({ "dropdown-active": focus }, "m-2 rounded-lg")
79 }
80 >
81 <ThemeSwitch />
82 </MenuItem>
83 <div className="divider" />
84 <MenuItem
85 as="div"
86 className={({ focus }) =>
87 cn({ "dropdown-active": focus }, "m-2 rounded-lg")
88 }
89 >
90 <Logout />
91 </MenuItem>
92 </MenuItems>
93 </MenuTransition>
94 </Menu>
95 );
96};
97
98export default SignedAccount;