// Copyright 2024, Command Line Inc. // SPDX-License-Identifier: Apache-2.0 import { type Placement } from "@floating-ui/react"; import clsx from "clsx"; import { memo, useState } from "react"; import { Button } from "./button"; import { Input, InputGroup, InputLeftElement } from "./input"; import { Popover, PopoverButton, PopoverContent } from "./popover"; import "./emojipalette.less"; type EmojiItem = { emoji: string; name: string }; const emojiList: EmojiItem[] = [ // Smileys & Emotion { emoji: "๐", name: "grinning face" }, { emoji: "๐", name: "beaming face with smiling eyes" }, { emoji: "๐", name: "face with tears of joy" }, { emoji: "๐คฃ", name: "rolling on the floor laughing" }, { emoji: "๐", name: "grinning face with big eyes" }, { emoji: "๐", name: "grinning face with smiling eyes" }, { emoji: "๐ ", name: "grinning face with sweat" }, { emoji: "๐", name: "grinning squinting face" }, { emoji: "๐", name: "winking face" }, { emoji: "๐", name: "smiling face with smiling eyes" }, { emoji: "๐", name: "face savoring food" }, { emoji: "๐", name: "smiling face with sunglasses" }, { emoji: "๐", name: "smiling face with heart-eyes" }, { emoji: "๐", name: "face blowing a kiss" }, { emoji: "๐", name: "kissing face" }, { emoji: "๐", name: "kissing face with smiling eyes" }, { emoji: "๐", name: "kissing face with closed eyes" }, { emoji: "๐", name: "slightly smiling face" }, { emoji: "๐ค", name: "hugging face" }, { emoji: "๐ค", name: "thinking face" }, { emoji: "๐", name: "neutral face" }, { emoji: "๐", name: "expressionless face" }, { emoji: "๐ถ", name: "face without mouth" }, { emoji: "๐", name: "face with rolling eyes" }, { emoji: "๐", name: "smirking face" }, { emoji: "๐ฃ", name: "persevering face" }, { emoji: "๐ฅ", name: "sad but relieved face" }, { emoji: "๐ฎ", name: "face with open mouth" }, { emoji: "๐ค", name: "zipper-mouth face" }, { emoji: "๐ฏ", name: "hushed face" }, { emoji: "๐ช", name: "sleepy face" }, { emoji: "๐ซ", name: "tired face" }, { emoji: "๐ฅฑ", name: "yawning face" }, { emoji: "๐ด", name: "sleeping face" }, { emoji: "๐", name: "relieved face" }, { emoji: "๐", name: "face with tongue" }, { emoji: "๐", name: "winking face with tongue" }, { emoji: "๐", name: "squinting face with tongue" }, { emoji: "๐คค", name: "drooling face" }, { emoji: "๐", name: "unamused face" }, { emoji: "๐", name: "downcast face with sweat" }, { emoji: "๐", name: "pensive face" }, { emoji: "๐", name: "confused face" }, { emoji: "๐", name: "upside-down face" }, { emoji: "๐ซ ", name: "melting face" }, { emoji: "๐ฒ", name: "astonished face" }, { emoji: "โน๏ธ", name: "frowning face" }, { emoji: "๐", name: "slightly frowning face" }, { emoji: "๐", name: "confounded face" }, { emoji: "๐", name: "disappointed face" }, { emoji: "๐", name: "worried face" }, { emoji: "๐ค", name: "face with steam from nose" }, { emoji: "๐ข", name: "crying face" }, { emoji: "๐ญ", name: "loudly crying face" }, { emoji: "๐ฆ", name: "frowning face with open mouth" }, { emoji: "๐ง", name: "anguished face" }, { emoji: "๐จ", name: "fearful face" }, { emoji: "๐ฉ", name: "weary face" }, { emoji: "๐คฏ", name: "exploding head" }, { emoji: "๐ฌ", name: "grimacing face" }, { emoji: "๐ฐ", name: "anxious face with sweat" }, { emoji: "๐ฑ", name: "face screaming in fear" }, { emoji: "๐ฅต", name: "hot face" }, { emoji: "๐ฅถ", name: "cold face" }, { emoji: "๐ณ", name: "flushed face" }, { emoji: "๐คช", name: "zany face" }, { emoji: "๐ต", name: "dizzy face" }, { emoji: "๐ฅด", name: "woozy face" }, { emoji: "๐ ", name: "angry face" }, { emoji: "๐ก", name: "pouting face" }, { emoji: "๐คฌ", name: "face with symbols on mouth" }, { emoji: "๐คฎ", name: "face vomiting" }, { emoji: "๐คข", name: "nauseated face" }, { emoji: "๐ท", name: "face with medical mask" }, // Gestures & Hand Signs { emoji: "๐", name: "waving hand" }, { emoji: "๐ค", name: "raised back of hand" }, { emoji: "๐๏ธ", name: "hand with fingers splayed" }, { emoji: "โ", name: "raised hand" }, { emoji: "๐", name: "OK hand" }, { emoji: "โ๏ธ", name: "victory hand" }, { emoji: "๐ค", name: "crossed fingers" }, { emoji: "๐ค", name: "love-you gesture" }, { emoji: "๐ค", name: "sign of the horns" }, { emoji: "๐ค", name: "call me hand" }, { emoji: "๐", name: "backhand index pointing left" }, { emoji: "๐", name: "backhand index pointing right" }, { emoji: "๐", name: "backhand index pointing up" }, { emoji: "๐", name: "backhand index pointing down" }, { emoji: "๐", name: "thumbs up" }, { emoji: "๐", name: "thumbs down" }, { emoji: "๐", name: "clapping hands" }, { emoji: "๐", name: "raising hands" }, { emoji: "๐", name: "open hands" }, { emoji: "๐", name: "folded hands" }, // Animals & Nature { emoji: "๐ถ", name: "dog face" }, { emoji: "๐ฑ", name: "cat face" }, { emoji: "๐ญ", name: "mouse face" }, { emoji: "๐น", name: "hamster face" }, { emoji: "๐ฐ", name: "rabbit face" }, { emoji: "๐ฆ", name: "fox face" }, { emoji: "๐ป", name: "bear face" }, { emoji: "๐ผ", name: "panda face" }, { emoji: "๐จ", name: "koala" }, { emoji: "๐ฏ", name: "tiger face" }, { emoji: "๐ฆ", name: "lion" }, { emoji: "๐ฎ", name: "cow face" }, { emoji: "๐ท", name: "pig face" }, { emoji: "๐ธ", name: "frog face" }, { emoji: "๐ต", name: "monkey face" }, { emoji: "๐ฆ", name: "unicorn face" }, { emoji: "๐ข", name: "turtle" }, { emoji: "๐", name: "snake" }, { emoji: "๐ฆ", name: "butterfly" }, { emoji: "๐", name: "honeybee" }, { emoji: "๐", name: "lady beetle" }, { emoji: "๐ฆ", name: "crab" }, { emoji: "๐ ", name: "tropical fish" }, { emoji: "๐", name: "fish" }, { emoji: "๐ฌ", name: "dolphin" }, { emoji: "๐ณ", name: "spouting whale" }, { emoji: "๐", name: "whale" }, { emoji: "๐ฆ", name: "shark" }, // Food & Drink { emoji: "๐", name: "green apple" }, { emoji: "๐", name: "red apple" }, { emoji: "๐", name: "pear" }, { emoji: "๐", name: "tangerine" }, { emoji: "๐", name: "lemon" }, { emoji: "๐", name: "banana" }, { emoji: "๐", name: "watermelon" }, { emoji: "๐", name: "grapes" }, { emoji: "๐", name: "strawberry" }, { emoji: "๐ซ", name: "blueberries" }, { emoji: "๐", name: "melon" }, { emoji: "๐", name: "cherries" }, { emoji: "๐", name: "peach" }, { emoji: "๐ฅญ", name: "mango" }, { emoji: "๐", name: "pineapple" }, { emoji: "๐ฅฅ", name: "coconut" }, { emoji: "๐ฅ", name: "avocado" }, { emoji: "๐ฅฆ", name: "broccoli" }, { emoji: "๐ฅ", name: "carrot" }, { emoji: "๐ฝ", name: "corn" }, { emoji: "๐ถ๏ธ", name: "hot pepper" }, { emoji: "๐", name: "hamburger" }, { emoji: "๐", name: "french fries" }, { emoji: "๐", name: "pizza" }, { emoji: "๐ญ", name: "hot dog" }, { emoji: "๐ฅช", name: "sandwich" }, { emoji: "๐ฟ", name: "popcorn" }, { emoji: "๐ฅ", name: "bacon" }, { emoji: "๐ฅ", name: "egg" }, { emoji: "๐ฐ", name: "cake" }, { emoji: "๐", name: "birthday cake" }, { emoji: "๐ฆ", name: "ice cream" }, { emoji: "๐ฉ", name: "doughnut" }, { emoji: "๐ช", name: "cookie" }, { emoji: "๐ซ", name: "chocolate bar" }, { emoji: "๐ฌ", name: "candy" }, { emoji: "๐ญ", name: "lollipop" }, // Activities { emoji: "โฝ", name: "soccer ball" }, { emoji: "๐", name: "basketball" }, { emoji: "๐", name: "american football" }, { emoji: "โพ", name: "baseball" }, { emoji: "๐ฅ", name: "softball" }, { emoji: "๐พ", name: "tennis" }, { emoji: "๐", name: "volleyball" }, { emoji: "๐ณ", name: "bowling" }, { emoji: "โณ", name: "flag in hole" }, { emoji: "๐ด", name: "person biking" }, { emoji: "๐ฎ", name: "video game" }, { emoji: "๐ฒ", name: "game die" }, { emoji: "๐ธ", name: "guitar" }, { emoji: "๐บ", name: "trumpet" }, // Miscellaneous { emoji: "๐", name: "rocket" }, { emoji: "๐", name: "sparkling heart" }, { emoji: "๐", name: "party popper" }, { emoji: "๐ฅ", name: "fire" }, { emoji: "๐", name: "gift" }, { emoji: "โค๏ธ", name: "red heart" }, { emoji: "๐งก", name: "orange heart" }, { emoji: "๐", name: "yellow heart" }, { emoji: "๐", name: "green heart" }, { emoji: "๐", name: "blue heart" }, { emoji: "๐", name: "purple heart" }, { emoji: "๐ค", name: "white heart" }, { emoji: "๐ค", name: "brown heart" }, { emoji: "๐", name: "broken heart" }, ]; interface EmojiPaletteProps { className?: string; placement?: Placement; onSelect?: (_: EmojiItem) => void; } const EmojiPalette = memo(({ className, placement, onSelect }: EmojiPaletteProps) => { const [searchTerm, setSearchTerm] = useState(""); const handleSearchChange = (val: string) => { setSearchTerm(val.toLowerCase()); }; const handleSelect = (item: { name: string; emoji: string }) => { onSelect?.(item); }; const filteredEmojis = emojiList.filter((item) => item.name.includes(searchTerm)); return (