yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
2import type { PostFragment } from "@hey/indexer";
3import { AnimateNumber } from "motion-plus-react";
4import { TipIcon } from "@/components/Shared/Icons/TipIcon";
5import MenuTransition from "@/components/Shared/MenuTransition";
6import TipMenu from "@/components/Shared/TipMenu";
7import { Tooltip } from "@/components/Shared/UI";
8import cn from "@/helpers/cn";
9import stopEventPropagation from "@/helpers/stopEventPropagation";
10
11interface TipActionProps {
12 post: PostFragment;
13 showCount: boolean;
14}
15
16const TipAction = ({ post, showCount }: TipActionProps) => {
17 const hasTipped = post.operations?.hasTipped;
18 const { tips } = post.stats;
19
20 const iconClassName = showCount
21 ? "w-[17px] sm:w-[20px]"
22 : "w-[15px] sm:w-[18px]";
23
24 return (
25 <div className="flex items-center space-x-1 text-gray-500 dark:text-gray-200">
26 <Menu as="div" className="relative">
27 <MenuButton
28 aria-label="Tip"
29 className={cn(
30 hasTipped
31 ? "text-brand-500 hover:bg-brand-300/20"
32 : "text-gray-500 hover:bg-gray-300/20 dark:text-gray-200",
33 "rounded-full p-1.5 outline-offset-2"
34 )}
35 onClick={stopEventPropagation}
36 >
37 <Tooltip content="Tip" placement="top" withDelay>
38 <TipIcon
39 className={cn({ "text-brand-500": hasTipped }, iconClassName)}
40 />
41 </Tooltip>
42 </MenuButton>
43 <MenuTransition>
44 <MenuItems
45 anchor="bottom start"
46 className="z-[5] mt-2 w-max origin-top-left rounded-xl border border-gray-200 bg-white shadow-xs focus:outline-hidden dark:border-gray-700 dark:bg-gray-900"
47 static
48 >
49 <MenuItem>
50 {({ close }) => <TipMenu closePopover={close} post={post} />}
51 </MenuItem>
52 </MenuItems>
53 </MenuTransition>
54 </Menu>
55 {(tips || 0) > 0 && !showCount && (
56 <AnimateNumber
57 className={cn(
58 hasTipped ? "text-brand-500" : "text-gray-500 dark:text-gray-200",
59 "w-3 text-[11px] sm:text-xs"
60 )}
61 format={{ notation: "compact" }}
62 key={`tip-count-${post.id}`}
63 transition={{ type: "tween" }}
64 >
65 {tips || 0}
66 </AnimateNumber>
67 )}
68 </div>
69 );
70};
71
72export default TipAction;