81 lines
1.4 KiB
TypeScript
81 lines
1.4 KiB
TypeScript
import { Card, CardContent } from "../ui/card";
|
|
|
|
// Emoji Picker component
|
|
const EmojiPicker = ({
|
|
onSelectEmoji,
|
|
}: {
|
|
onSelectEmoji: (emoji: string) => void;
|
|
}) => {
|
|
// Common emojis array
|
|
const emojis = [
|
|
"😊",
|
|
"😂",
|
|
"❤️",
|
|
"👍",
|
|
"😍",
|
|
"🙏",
|
|
"😭",
|
|
"😘",
|
|
"🥰",
|
|
"😁",
|
|
"🔥",
|
|
"😅",
|
|
"🤔",
|
|
"☺️",
|
|
"🥺",
|
|
"🎉",
|
|
"✨",
|
|
"👏",
|
|
"👌",
|
|
"😉",
|
|
"🤗",
|
|
"💕",
|
|
"😎",
|
|
"🙄",
|
|
"😋",
|
|
"😀",
|
|
"😆",
|
|
"😃",
|
|
"😄",
|
|
"🤣",
|
|
"😇",
|
|
"🤩",
|
|
"😒",
|
|
"🙂",
|
|
"😳",
|
|
"😌",
|
|
"🥳",
|
|
"😔",
|
|
"😢",
|
|
"😡",
|
|
"🤬",
|
|
"😱",
|
|
"👋",
|
|
"🤞",
|
|
"💯",
|
|
"🙈",
|
|
];
|
|
|
|
return (
|
|
<Card className="w-full p-0 border-0 shadow-none ">
|
|
<CardContent>
|
|
<div
|
|
className="grid p-2 grid-cols-8 gap-1 max-h-[180px] hide-scrollbar overflow-y-auto"
|
|
style={{ direction: "rtl" }}
|
|
>
|
|
{emojis.map((emoji, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => onSelectEmoji(emoji)}
|
|
className="text-xl hover:bg-WHITE3 rounded transition-colors"
|
|
>
|
|
{emoji}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
export default EmojiPicker;
|