import React, { useEffect, useState, useRef } from "react"; // headless ui import { Tab, Transition, Popover } from "@headlessui/react"; // types import { Props } from "./types"; // emojis import emojis from "./emojis.json"; // helpers import { getRecentEmojis, saveRecentEmoji } from "./helpers"; import { getRandomEmoji } from "helpers/common.helper"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; const tabOptions = [ { key: "emoji", title: "Emoji", }, { key: "icon", title: "Icon", }, ]; const EmojiIconPicker: React.FC = ({ label, value, onChange }) => { const ref = useRef(null); const [isOpen, setIsOpen] = useState(false); const [recentEmojis, setRecentEmojis] = useState([]); useEffect(() => { setRecentEmojis(getRecentEmojis()); }, []); useOutsideClickDetector(ref, () => { setIsOpen(false); }); useEffect(() => { if (!value || value?.length === 0) onChange(getRandomEmoji()); }, [value, onChange]); return ( setIsOpen((prev) => !prev)} > {label}
{tabOptions.map((tab) => ( `-my-1 w-1/2 border-b py-2 text-center text-sm font-medium outline-none transition-colors ${ selected ? "border-theme" : "border-transparent" }` } > {tab.title} ))} {recentEmojis.length > 0 && (

Recent Emojis

{recentEmojis.map((emoji) => ( ))}
)}

All Emojis

{emojis.map((emoji) => ( ))}

Coming Soon...

); }; export default EmojiIconPicker;