Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { MenuItem } from "@headlessui/react";
2import { NoSymbolIcon } from "@heroicons/react/24/outline";
3import getAccount from "@hey/helpers/getAccount";
4import type { AccountFragment } from "@hey/indexer";
5import { type MouseEvent, useCallback } from "react";
6import cn from "@/helpers/cn";
7import stopEventPropagation from "@/helpers/stopEventPropagation";
8import { useBlockAlertStore } from "@/store/non-persisted/alert/useBlockAlertStore";
9
10const menuItemClassName = ({ focus }: { focus: boolean }) =>
11 cn(
12 { "dropdown-active": focus },
13 "m-2 flex cursor-pointer items-center space-x-2 rounded-lg px-2 py-1.5 text-sm"
14 );
15
16interface BlockProps {
17 account: AccountFragment;
18}
19
20const Block = ({ account }: BlockProps) => {
21 const { setShowBlockOrUnblockAlert } = useBlockAlertStore();
22 const isBlockedByMe = account.operations?.isBlockedByMe;
23
24 const handleClick = useCallback(
25 (event: MouseEvent) => {
26 stopEventPropagation(event);
27 setShowBlockOrUnblockAlert(true, account);
28 },
29 [account, setShowBlockOrUnblockAlert]
30 );
31
32 return (
33 <MenuItem as="div" className={menuItemClassName} onClick={handleClick}>
34 <NoSymbolIcon className="size-4" />
35 <div>
36 {isBlockedByMe ? "Unblock" : "Block"} {getAccount(account).username}
37 </div>
38 </MenuItem>
39 );
40};
41
42export default Block;