feat: emoji reactions

src/components/SuggestedEmojis/index.tsx

@@ -0,0 +1,52 @@
+import { Button } from '@/components/ui/button'
+import { parseNativeEmoji } from 'emoji-picker-react/src/dataUtils/parseNativeEmoji'
+import { getSuggested } from 'emoji-picker-react/src/dataUtils/suggested'
+import { MoreHorizontal } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+export default function SuggestedEmojis({
+  onEmojiClick,
+  onMoreButtonClick
+}: {
+  onEmojiClick: (emoji: string) => void
+  onMoreButtonClick: () => void
+}) {
+  const [suggestedEmojis, setSuggestedEmojis] = useState<string[]>([
+    '1f44d',
+    '2764-fe0f',
+    '1f602',
+    '1f972',
+    '1f440',
+    '1fae1',
+    '1fac2'
+  ]) // 👍 ❤️ 😂 🥲 👀 🫡 🫂
+
+  useEffect(() => {
+    try {
+      const suggested = getSuggested()
+      const suggestEmojis = suggested.sort((a, b) => b.count - a.count).map((item) => item.unified)
+      setSuggestedEmojis((pre) =>
+        [...suggestEmojis, ...pre.filter((e) => !suggestEmojis.includes(e))].slice(0, 8)
+      )
+    } catch {
+      // ignore
+    }
+  }, [])
+
+  return (
+    <div className="flex gap-2 p-1" onClick={(e) => e.stopPropagation()}>
+      {suggestedEmojis.map((emoji, index) => (
+        <div
+          key={index}
+          className="w-8 h-8 rounded-lg clickable flex justify-center items-center text-xl"
+          onClick={() => onEmojiClick(parseNativeEmoji(emoji))}
+        >
+          {parseNativeEmoji(emoji)}
+        </div>
+      ))}
+      <Button variant="ghost" className="w-8 h-8 text-muted-foreground" onClick={onMoreButtonClick}>
+        <MoreHorizontal size={24} />
+      </Button>
+    </div>
+  )
+}