import React, { useEffect, useState, useRef } from "react"; // headless ui import { Tab, Transition, Popover } from "@headlessui/react"; // hooks import useOutsideClickDetector from "lib/hooks/useOutsideClickDetector"; // emoji import emojis from "./emojis.json"; // helpers import { getRecentEmojis, saveRecentEmoji } from "./helpers"; // types import { Props } from "./types"; 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); }); return ( setIsOpen((prev) => !prev)} > {label}
{tabOptions.map((tab) => ( `w-1/2 py-2 transition-colors border-b text-sm font-medium text-center outline-none -my-1 ${ 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;