client/packages/chat/src/components/emoji/emojiPicker.tsx

29 lines
718 B
TypeScript

import { Button } from "@methanium/ui";
import Emoji from "@tensamin/markdown/emoji";
import { getRecentEmojis, useEmojiRanks } from "./emojiRanks";
export default function EmojiPicker({
onSelect,
}: {
onSelect: (emoji: string) => void;
}) {
const { ranks } = useEmojiRanks();
const emojis = getRecentEmojis(ranks, 3);
return (
<div className="flex flex-row gap-1 p-1">
{emojis.map((emoji) => (
<Button
key={emoji}
aria-label={`Select ${emoji}`}
className="h-10 w-10 p-0"
onClick={() => onSelect(emoji)}
type="button"
variant="ghost"
>
<Emoji shortcode={emoji} />
</Button>
))}
</div>
);
}