yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { Menu, MenuButton, MenuItems } from "@headlessui/react";
2import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
3import type { PostFragment } from "@hey/indexer";
4import { Fragment } from "react";
5import MenuTransition from "@/components/Shared/MenuTransition";
6import cn from "@/helpers/cn";
7import stopEventPropagation from "@/helpers/stopEventPropagation";
8import { useAccountStore } from "@/store/persisted/useAccountStore";
9import Bookmark from "./Bookmark";
10import CopyPostText from "./CopyPostText";
11import Delete from "./Delete";
12import Edit from "./Edit";
13import HideComment from "./HideComment";
14import NotInterested from "./NotInterested";
15import Report from "./Report";
16import Share from "./Share";
17
18interface PostMenuProps {
19 post: PostFragment;
20}
21
22const PostMenu = ({ post }: PostMenuProps) => {
23 const { currentAccount } = useAccountStore();
24 const canEdit =
25 post.operations?.canEdit.__typename === "PostOperationValidationPassed";
26 const iconClassName = "w-[15px] sm:w-[18px]";
27
28 return (
29 <Menu as="div" className="relative">
30 <MenuButton as={Fragment}>
31 <button
32 aria-label="More"
33 className="rounded-full p-1.5 hover:bg-gray-300/20"
34 onClick={stopEventPropagation}
35 type="button"
36 >
37 <EllipsisHorizontalIcon
38 className={cn("text-gray-500 dark:text-gray-200", iconClassName)}
39 />
40 </button>
41 </MenuButton>
42 <MenuTransition>
43 <MenuItems
44 anchor="bottom end"
45 className="z-[5] mt-2 w-max origin-top-right rounded-xl border border-gray-200 bg-white shadow-xs focus:outline-hidden dark:border-gray-700 dark:bg-gray-900"
46 static
47 >
48 {currentAccount ? (
49 <>
50 <NotInterested post={post} />
51 <HideComment post={post} />
52 <Bookmark post={post} />
53 <div className="divider" />
54 </>
55 ) : null}
56 <Share post={post} />
57 <CopyPostText post={post} />
58 <div className="divider" />
59 {currentAccount?.address === post?.author?.address ? (
60 <>
61 {canEdit && currentAccount?.hasSubscribed ? (
62 <Edit post={post} />
63 ) : null}
64 <Delete post={post} />
65 </>
66 ) : (
67 <Report post={post} />
68 )}
69 </MenuItems>
70 </MenuTransition>
71 </Menu>
72 );
73};
74
75export default PostMenu;