29 lines
720 B
TypeScript
29 lines
720 B
TypeScript
import { Button } from "@methanium/ui";
|
|
import { Emoji } from "@methanium/ui/markdown";
|
|
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>
|
|
);
|
|
}
|