yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { Menu, MenuButton, MenuItems } from "@headlessui/react";
2import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
3import type { AccountFragment } from "@hey/indexer";
4import { Fragment } from "react";
5import MenuTransition from "@/components/Shared/MenuTransition";
6import stopEventPropagation from "@/helpers/stopEventPropagation";
7import { useAccountStore } from "@/store/persisted/useAccountStore";
8import Block from "./Block";
9import CopyLink from "./CopyLink";
10import Mute from "./Mute";
11import Report from "./Report";
12
13interface AccountMenuProps {
14 account: AccountFragment;
15}
16
17const AccountMenu = ({ account }: AccountMenuProps) => {
18 const { currentAccount } = useAccountStore();
19
20 return (
21 <Menu as="div" className="relative">
22 <MenuButton as={Fragment}>
23 <button
24 aria-label="More"
25 className="rounded-full p-1.5 hover:bg-gray-300/20"
26 onClick={stopEventPropagation}
27 type="button"
28 >
29 <EllipsisVerticalIcon className="size-5 text-gray-500 dark:text-gray-200" />
30 </button>
31 </MenuButton>
32 <MenuTransition>
33 <MenuItems
34 anchor="bottom end"
35 className="mt-2 w-48 origin-top-right rounded-xl border border-gray-200 bg-white shadow-xs focus:outline-hidden dark:border-gray-700 dark:bg-gray-900"
36 static
37 >
38 <CopyLink account={account} />
39 {currentAccount && currentAccount?.address !== account.address ? (
40 <>
41 <Block account={account} />
42 <Mute account={account} />
43 <Report account={account} />
44 </>
45 ) : null}
46 </MenuItems>
47 </MenuTransition>
48 </Menu>
49 );
50};
51
52export default AccountMenu;