52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
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>
|
|
)
|
|
}
|