37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import { noteContentAtom } from '@stores/note';
|
|
|
|
import data from '@emoji-mart/data';
|
|
import Picker from '@emoji-mart/react';
|
|
import * as Popover from '@radix-ui/react-popover';
|
|
import { Emoji } from 'iconoir-react';
|
|
import { useAtom } from 'jotai';
|
|
|
|
export default function EmojiPicker() {
|
|
const [value, setValue] = useAtom(noteContentAtom);
|
|
|
|
return (
|
|
<Popover.Root>
|
|
<Popover.Trigger asChild>
|
|
<button className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700">
|
|
<Emoji width={16} height={16} className="text-zinc-400" />
|
|
</button>
|
|
</Popover.Trigger>
|
|
<Popover.Portal>
|
|
<Popover.Content
|
|
className="rounded-md 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"
|
|
sideOffset={5}
|
|
>
|
|
<Picker
|
|
data={data}
|
|
emojiSize={16}
|
|
navPosition={'none'}
|
|
skinTonePosition={'none'}
|
|
onEmojiSelect={(res) => setValue(value + ' ' + res.native)}
|
|
/>
|
|
<Popover.Arrow className="fill-[#141516]" />
|
|
</Popover.Content>
|
|
</Popover.Portal>
|
|
</Popover.Root>
|
|
);
|
|
}
|