@replyke/ui-core-react-js
Version:
Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
42 lines • 1.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const emojiGroup1 = ["😂", "❤️", "🤣", "😍", "🙏"];
const emojiGroup2 = ["🥰", "😊", "😭", "👍", "😅"];
const emojiGroup3 = ["😢", "👏", "💕", "🥺", "😘"];
const emojiGroup4 = ["🤔", "🤗", "🙌", "😎", "✨"];
function EmojiSuggestions({ onEmojiClick, }) {
const [clickedEmoji, setClickedEmoji] = (0, react_1.useState)(null);
const [emojiSubset, setEmojiSubset] = (0, react_1.useState)([]);
(0, react_1.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 ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.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))) }));
}
exports.default = EmojiSuggestions;
//# sourceMappingURL=EmojiSuggestions.js.map