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