@replyke/ui-core-react-js/dist/esm/components/EmojiSuggestions.js

Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.

import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
const emojiGroup1 = ["😂", "❤️", "🤣", "😍", "🙏"];
const emojiGroup2 = ["🥰", "😊", "😭", "👍", "😅"];
const emojiGroup3 = ["😢", "👏", "💕", "🥺", "😘"];
const emojiGroup4 = ["🤔", "🤗", "🙌", "😎", "✨"];
function EmojiSuggestions({ onEmojiClick, }) {
    const [clickedEmoji, setClickedEmoji] = useState(null);
    const [emojiSubset, setEmojiSubset] = useState([]);
    useEffect(() => {
        // Pick 8 random emojis from the array
        const combinedEmojis = [...emojiGroup1, ...emojiGroup2, ...emojiGroup3];
        const shuffled = combinedEmojis.sort(() => 0.5 - Math.random());
        setEmojiSubset(shuffled.slice(0, 8));
    }, []);
    const handleEmojiClick = (emoji) => {
        setClickedEmoji(emoji);
        onEmojiClick(emoji);
        setTimeout(() => setClickedEmoji(null), 150); // Reset after animation
    };
    return (_jsx("div", { style: {
            display: "flex",
            gap: 12,
            padding: 8,
            borderBottom: "1px solid #e6e6e6",
            overflowX: "auto",
            overflowY: "hidden",
            scrollbarWidth: "none",
            msOverflowStyle: "none",
        }, children: emojiSubset.map((emoji) => (_jsx("div", { onClick: () => handleEmojiClick(emoji), style: {
                cursor: "pointer",
                fontSize: 16,
                display: "inline-block",
                userSelect: "none",
                transition: "transform 0.15s",
                transform: clickedEmoji === emoji ? "scale(0.8)" : "scale(1)", // Shrink and grow
            }, children: emoji }, emoji))) }));
}
export default EmojiSuggestions;
//# sourceMappingURL=EmojiSuggestions.js.map