fix: replace emoji picker

Signed-off-by: Innei <i@innei.in>

package.json

@@ -37,8 +37,6 @@
  },
  "dependencies": {
  "@clerk/nextjs": "4.22.0",
- "@emoji-mart/data": "1.1.2",
- "@emoji-mart/react": "1.1.1",
  "@floating-ui/react-dom": "2.0.1",
  "@mx-space/api-client": "1.4.3",
  "@radix-ui/react-dialog": "1.0.4",
@@ -54,6 +52,7 @@
  "daisyui": "3.2.1",
  "dayjs": "1.11.9",
  "emoji-mart": "5.5.2",
+ "emoji-picker-react": "4.4.10",
  "foxact": "0.2.16",
  "framer-motion": "^10.13.0",
  "idb-keyval": "6.2.1",

src/components/widgets/shared/EmojiPicker.tsx

@@ -1,50 +1,17 @@
-import { useQuery } from '@tanstack/react-query'
-import { memo, useCallback } from 'react'
+import EmojiPicker$, { EmojiStyle } from 'emoji-picker-react'
+import { memo } from 'react'
 import type { FC } from 'react'
 
-import { Loading } from '~/components/ui/loading'
-
 export const EmojiPicker: FC<{
  onEmojiSelect: (emoji: string) => void
 }> = memo(({ onEmojiSelect }) => {
- const { data, isLoading } = useQuery({
- queryKey: ['emoji-data'],
- queryFn: () =>
- fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data', {
- next: {
- revalidate: 60 * 60 * 24 * 7,
- },
- }).then((response) => response.json()),
-
- staleTime: Number.POSITIVE_INFINITY,
- })
- const handleSelect = useCallback((emoji: any) => {
- return onEmojiSelect(emoji.native)
- }, [])
-
- const handleDivRef = (divEl: HTMLDivElement) => {
- import('emoji-mart').then(
- (m) =>
- new m.Picker({
- ref: {
- current: divEl,
- },
- data,
- onEmojiSelect: handleSelect,
- maxFrequentRows: 0,
- }),
- )
- }
-
- if (isLoading)
- return (
- <Loading className="flex h-[435px] w-[352px] rounded-md bg-slate-100 center dark:bg-neutral-800" />
- )
-
  return (
- <div className="w-[352px]">
- <div ref={handleDivRef} />
- </div>
+ <EmojiPicker$
+ onEmojiClick={(e) => {
+ onEmojiSelect(e.emoji)
+ }}
+ emojiStyle={EmojiStyle.NATIVE}
+ />
  )
 })
 EmojiPicker.displayName = 'EmojiPicker'