| import Picker from "@emoji-mart/react"; | |
| import data from "@emoji-mart/data"; | |
| import { FC } from "react"; | |
| import { useMediaQuery } from "react-responsive"; | |
| const emojis = (data as unknown as any).emojis as { [key: string]: EmojiSkin }; | |
| export interface EmojiData { | |
| id: string; | |
| name: string; | |
| native: string; | |
| unified: string; | |
| keywords: string[]; | |
| shortcodes: string; | |
| skin: number; | |
| aliases: string[]; | |
| } | |
| const exceptEmojis = [ | |
| "bat", | |
| "feet", | |
| "coral", | |
| "snail", | |
| "bug", | |
| "ant", | |
| "bee", | |
| "beetle", | |
| "ladybug", | |
| "cricket", | |
| "cockroach", | |
| "spider", | |
| "scorpion", | |
| "mosquito", | |
| "fly", | |
| "worm", | |
| "microbe", | |
| "gorilla", | |
| "orangutan", | |
| "tiger2", | |
| "leopard", | |
| "zebra_face", | |
| "pig_nose", | |
| "camel", | |
| "black_cat", | |
| "water_buffalo", | |
| "rat", | |
| "spider_web", | |
| "service_dog", | |
| "mammoth", | |
| "frog", | |
| "crocodile", | |
| "lizard", | |
| "snake", | |
| "t-rex", | |
| "dragon", | |
| "empty_nest", | |
| "octopus", | |
| "ox", | |
| "wolf", | |
| "headstone", | |
| "moyai", | |
| "new_moon", | |
| "new_moon_with_face", | |
| "shrimp", | |
| "lobster", | |
| "fried_shrimp", | |
| "coffin", | |
| "drop_of_blood", | |
| "pinata", | |
| "performing_arts", | |
| "rock", | |
| "clubs", | |
| "chess_pawn", | |
| "spades", | |
| "knot", | |
| "bathtub", | |
| "shower", | |
| "white_flower", | |
| "hammer", | |
| "nazar_amulet", | |
| "hamsa", | |
| "hammer_and_wrench", | |
| "squid", | |
| "crab", | |
| "smoking", | |
| "dna", | |
| "musical_score", | |
| "musical_note", | |
| "notes", | |
| "dark_sunglasses", | |
| "kaaba", | |
| "old_key", | |
| "bikini", | |
| "one-piece_swimsuit", | |
| "sari", | |
| "sloth", | |
| "x-ray", | |
| ]; | |
| interface EmojiSkin { | |
| id: string; | |
| name: string; | |
| keywords: string[]; | |
| skins: { native: string; shortcodes: string; unified: string }[]; | |
| } | |
| const categoryIcons = { | |
| categoryIcons: { | |
| "new-people": { | |
| svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>', | |
| }, | |
| }, | |
| }; | |
| const custom = [ | |
| { | |
| id: "recommend", | |
| name: "Recommend", | |
| emojis: [ | |
| emojis["baby_chick"], | |
| emojis["hatched_chick"], | |
| emojis["dog"], | |
| emojis["fox_face"], | |
| emojis["lion_face"], | |
| emojis["tiger"], | |
| emojis["hamster"], | |
| emojis["panda_face"], | |
| emojis["rabbit"], | |
| emojis["polar_bear"], | |
| emojis["tangerine"], | |
| emojis["watermelon"], | |
| emojis["pineapple"], | |
| emojis["beer"], | |
| emojis["curry"], | |
| emojis["cake"], | |
| emojis["snow_capped_mountain"], | |
| emojis["volcano"], | |
| emojis["bridge_at_night"], | |
| emojis["kiwifruit"], | |
| emojis["stadium"], | |
| emojis["foggy"], | |
| emojis["night_with_stars"], | |
| emojis["cityscape"], | |
| emojis["sunrise_over_mountains"], | |
| emojis["sunrise"], | |
| emojis["city_sunset"], | |
| emojis["city_sunrise"], | |
| ], | |
| }, | |
| { | |
| id: "new-people", | |
| name: "People", | |
| emojis: [ | |
| emojis["child"], | |
| emojis["boy"], | |
| emojis["girl"], | |
| emojis["adult"], | |
| emojis["person_with_blond_hair"], | |
| emojis["man"], | |
| emojis["bearded_person"], | |
| emojis["man_with_beard"], | |
| emojis["woman_with_beard"], | |
| emojis["red_haired_man"], | |
| emojis["curly_haired_man"], | |
| emojis["white_haired_man"], | |
| emojis["bald_man"], | |
| emojis["woman"], | |
| emojis["red_haired_woman"], | |
| emojis["red_haired_person"], | |
| emojis["curly_haired_woman"], | |
| emojis["curly_haired_person"], | |
| emojis["white_haired_woman"], | |
| emojis["white_haired_person"], | |
| emojis["bald_woman"], | |
| emojis["bald_person"], | |
| emojis["blond-haired-woman"], | |
| emojis["blond-haired-man"], | |
| emojis["older_adult"], | |
| emojis["older_man"], | |
| emojis["older_woman"], | |
| emojis["person_frowning"], | |
| emojis["man-frowning"], | |
| emojis["woman-frowning"], | |
| emojis["person_with_pouting_face"], | |
| emojis["man-pouting"], | |
| emojis["woman-pouting"], | |
| emojis["health_worker"], | |
| emojis["male-doctor"], | |
| emojis["female-doctor"], | |
| emojis["student"], | |
| emojis["male-student"], | |
| emojis["female-student"], | |
| emojis["teacher"], | |
| emojis["male-teacher"], | |
| emojis["female-teacher"], | |
| emojis["judge"], | |
| emojis["male-judge"], | |
| emojis["female-judge"], | |
| emojis["farmer"], | |
| emojis["male-farmer"], | |
| emojis["female-farmer"], | |
| emojis["cook"], | |
| emojis["male-cook"], | |
| emojis["female-cook"], | |
| emojis["mechanic"], | |
| emojis["male-mechanic"], | |
| emojis["female-mechanic"], | |
| emojis["office_worker"], | |
| emojis["male-office-worker"], | |
| emojis["female-office-worker"], | |
| emojis["scientist"], | |
| emojis["male-scientist"], | |
| emojis["female-scientist"], | |
| emojis["technologist"], | |
| emojis["male-technologist"], | |
| emojis["female-technologist"], | |
| emojis["artist"], | |
| emojis["male-artist"], | |
| emojis["female-artist"], | |
| emojis["astronaut"], | |
| emojis["male-astronaut"], | |
| emojis["female-astronaut"], | |
| emojis["sleuth_or_spy"], | |
| emojis["male-detective"], | |
| emojis["female-detective"], | |
| emojis["construction_worker"], | |
| emojis["male-construction-worker"], | |
| emojis["female-construction-worker"], | |
| emojis["person_with_crown"], | |
| emojis["prince"], | |
| emojis["princess"], | |
| emojis["person_in_tuxedo"], | |
| emojis["man_in_tuxedo"], | |
| emojis["woman_in_tuxedo"], | |
| emojis["bride_with_veil"], | |
| emojis["man_with_veil"], | |
| emojis["woman_with_veil"], | |
| ], | |
| }, | |
| ]; | |
| export const EmojiSelector: FC<{ onSelect: (e: EmojiData) => void }> = ({ | |
| onSelect, | |
| }) => { | |
| const isSmallScreen = useMediaQuery({ query: "(max-width: 768px)" }); | |
| return ( | |
| <Picker | |
| exceptEmojis={exceptEmojis} | |
| dynamicWidth={true} | |
| custom={custom} | |
| categories={[ | |
| "recommend", | |
| "new-people", | |
| "nature", | |
| "foods", | |
| "activity", | |
| "places", | |
| "objects", | |
| ]} | |
| theme="dark" | |
| categoryIcons={categoryIcons} | |
| searchPosition={isSmallScreen ? "none" : "bottom"} | |
| navPosition={isSmallScreen ? "none" : "top"} | |
| previewPosition={isSmallScreen ? "none" : "bottom"} | |
| data={data} | |
| onEmojiSelect={onSelect} | |
| /> | |
| ); | |
| }; | |