@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
152 lines (151 loc) • 4.78 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
const EmojiPicker = ({ onEmojiSelect, onClose }) => {
const [activeCategory, setActiveCategory] = useState("smileys");
const emojiCategories = {
smileys: {
name: "Smileys & People",
emojis: [
"😀",
"😃",
"😄",
"😁",
"😆",
"😅",
"😂",
"🤣",
"😊",
"😇",
"🙂",
"🙃",
"😉",
"😌",
"😍",
"🥰",
"😘",
"😗",
"😙",
"😚",
"😋",
"😛",
"😝",
"😜",
"🤪",
"🤨",
"🧐",
"🤓",
"😎",
"🤩",
"🥳",
],
},
nature: {
name: "Animals & Nature",
emojis: [
"🐶",
"🐱",
"🐭",
"🐹",
"🐰",
"🦊",
"🐻",
"🐼",
"🐨",
"🐯",
"🦁",
"🐮",
"🐷",
"🐸",
"🐵",
"🙈",
"🙉",
"🙊",
"🐒",
"🐔",
"🐧",
"🐦",
"🐤",
"🐣",
"🐥",
"🦆",
"🦅",
"🦉",
"🦇",
"🐺",
],
},
food: {
name: "Food & Drink",
emojis: [
"🍎",
"🍐",
"🍊",
"🍋",
"🍌",
"🍉",
"🍇",
"🍓",
"🍈",
"🍒",
"🍑",
"🥭",
"🍍",
"🥥",
"🥝",
"🍅",
"🍆",
"🥑",
"🥦",
"🥬",
"🥒",
"🌶️",
"🌽",
"🥕",
"🧄",
"🧅",
"🥔",
"🍠",
"🥐",
"🍞",
],
},
activities: {
name: "Activities",
emojis: [
"⚽",
"🏀",
"🏈",
"⚾",
"🥎",
"🎾",
"🏐",
"🏉",
"🥏",
"🎱",
"🪀",
"🏓",
"🏸",
"🏒",
"🏑",
"🥍",
"🏏",
"🪃",
"🥅",
"⛳",
"🪁",
"🏹",
"🎣",
"🤿",
"🥊",
"🥋",
"🎽",
"🛹",
"🛷",
"⛸️",
],
},
};
return (_jsx("div", { className: "absolute bottom-full left-0 mb-2 bg-white border border-gray-200 rounded-xl shadow-lg w-80 z-50", children: _jsxs("div", { className: "p-3", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-gray-900", children: "Choose an emoji" }), _jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 text-xl", children: "\u00D7" })] }), _jsx("div", { className: "flex gap-1 mb-3", children: Object.entries(emojiCategories).map(([key, category]) => (_jsx("button", { onClick: () => setActiveCategory(key), className: `px-3 py-1 text-xs rounded-full transition-colors ${activeCategory === key ? "bg-blue-100 text-blue-600" : "text-gray-500 hover:text-gray-700"}`, children: category.name.split(" ")[0] }, key))) }), _jsx("div", { className: "grid grid-cols-8 gap-1 max-h-48 overflow-y-auto", children: emojiCategories[activeCategory].emojis.map((emoji, index) => (_jsx("button", { onClick: () => onEmojiSelect(emoji), className: "p-2 text-xl hover:bg-gray-100 rounded-lg transition-colors", children: emoji }, index))) })] }) }));
};
export default EmojiPicker;