131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|
import * as Popover from '@radix-ui/react-popover';
|
|
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { toast } from 'sonner';
|
|
|
|
import { useNDK } from '@libs/ndk/provider';
|
|
|
|
import { ReactionIcon } from '@shared/icons';
|
|
|
|
const REACTIONS = [
|
|
{
|
|
content: '👏',
|
|
img: '/clapping_hands.png',
|
|
},
|
|
{
|
|
content: '🤪',
|
|
img: '/face_with_tongue.png',
|
|
},
|
|
{
|
|
content: '😮',
|
|
img: '/face_with_open_mouth.png',
|
|
},
|
|
{
|
|
content: '😢',
|
|
img: '/crying_face.png',
|
|
},
|
|
{
|
|
content: '🤡',
|
|
img: '/clown_face.png',
|
|
},
|
|
];
|
|
|
|
export function NoteReaction({ event }: { event: NDKEvent }) {
|
|
const [open, setOpen] = useState(false);
|
|
const [reaction, setReaction] = useState<string | null>(null);
|
|
|
|
const { ndk } = useNDK();
|
|
const navigate = useNavigate();
|
|
|
|
const getReactionImage = (content: string) => {
|
|
const reaction: { img: string } = REACTIONS.find((el) => el.content === content);
|
|
return reaction.img;
|
|
};
|
|
|
|
const react = async (content: string) => {
|
|
try {
|
|
if (!ndk.signer) return navigate('/new/privkey');
|
|
|
|
setReaction(content);
|
|
|
|
// react
|
|
await event.react(content);
|
|
setOpen(false);
|
|
} catch (e) {
|
|
toast.error(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Popover.Root open={open} onOpenChange={setOpen}>
|
|
<Popover.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
className="group inline-flex h-7 w-7 items-center justify-center text-neutral-600 dark:text-neutral-400"
|
|
>
|
|
{reaction ? (
|
|
<img src={getReactionImage(reaction)} alt={reaction} className="h-5 w-5" />
|
|
) : (
|
|
<ReactionIcon className="h-5 w-5 group-hover:text-blue-500" />
|
|
)}
|
|
</button>
|
|
</Popover.Trigger>
|
|
<Popover.Portal>
|
|
<Popover.Content
|
|
className="select-none rounded-md bg-neutral-200 px-1 py-1 text-sm will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade dark:bg-neutral-800"
|
|
sideOffset={0}
|
|
side="top"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => react('👏')}
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
|
>
|
|
<img src="/clapping_hands.png" alt="Clapping Hands" className="h-6 w-6" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => react('🤪')}
|
|
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
|
>
|
|
<img
|
|
src="/face_with_tongue.png"
|
|
alt="Face with Tongue"
|
|
className="h-6 w-6"
|
|
/>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => react('😮')}
|
|
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
|
>
|
|
<img
|
|
src="/face_with_open_mouth.png"
|
|
alt="Face with Open Mouth"
|
|
className="h-6 w-6"
|
|
/>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => react('😢')}
|
|
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
|
>
|
|
<img src="/crying_face.png" alt="Crying Face" className="h-6 w-6" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => react('🤡')}
|
|
className="inline-flex h-7 w-7 items-center justify-center rounded backdrop-blur-xl hover:bg-white/10"
|
|
>
|
|
<img src="/clown_face.png" alt="Clown Face" className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
<Popover.Arrow className="fill-neutral-200 dark:fill-neutral-800" />
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover.Root>
|
|
);
|
|
}
|