utopia-ui/src/Components/Templates/EmojiPicker.tsx

import { useState } from 'react';

export const EmojiPicker = ({selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape}) => {



  const [isOpen, setIsOpen] = useState(false);

  const emojis = [
    '❤️', '🙏', '👍', '🌻',, '✨', '☀️',
    '🔥', '🪵', '💧', '🎶', '🎨','🍄', 
    '📝', '✉️', '🧩','💡', '🎓', '💬', 
    '🛠', '💻', '🕹', '🖨', '🚐', '🛒',
    '⚽️', '🧵', '👀', '🌱',
    '🏕', '💪',  '🎁',   '🏹', 
    '🥕', '🥇', '🥈', '🥉'];
  const shapes = ["squircle", "circle", "hexagon-2"];

  const colors = ["#FF99C8", "#fff0d6", "#FCF6BD", "#D0F4DE", "#A9DEF9", "#E4C1F9", "#de324c", "#f4895f", "#f8e16f", "#95cf92", "#369acc", "#9656a2"]


  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const selectEmoji = (emoji) => {
    setSelectedEmoji(emoji);
    setIsOpen(false);
  };

  const selectShape = (shape) => {
    setSelectedShape(shape);
    setIsOpen(false);
  };

  const selectColor = (color) => {
    setSelectedColor(color);
    setIsOpen(false);
  };



  return (
    <>
      <div
        onClick={toggleDropdown}
        className={`tw-cursor-pointer ${selectedEmoji=="select badge" ? 'tw-text-sm !tw-p-9 tw-text-center ' : 'tw-text-6xl'} tw-mask tw-mask-${selectedShape} tw-p-6 tw-bg-[${selectedColor}]`}
      >
        {selectedEmoji}
      </div>

      {isOpen && (
        <div className="tw-absolute tw-z-3000 tw-top-0 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-mt-12 tw-bg-base-100 tw-rounded-2xl tw-shadow-lg tw-p-2 tw-w-full">
          <div className='tw-grid tw-grid-cols-6 tw-gap-2 tw-pb-2'>
            {emojis.map((emoji) => (
              <button
                key={emoji}
                onClick={() => selectEmoji(emoji)}
                className={`tw-cursor-pointer  tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji == selectedEmoji && "tw-bg-base-300"}`}
              >
                {emoji}
              </button>
            ))}
          </div>
          <hr />
          <div className='tw-grid tw-grid-cols-3 tw-gap-2 tw-py-2'>
            {shapes.map(shape => (
              <div
                key={shape}
                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 ${shape == selectedShape && "tw-bg-base-300"}`}
                onClick={() => selectShape(shape)}>
                <div className={`tw-h-12 tw-mask tw-mask-${shape} tw-bg-neutral-content`}></div>
              </div>
            ))}
          </div>
          <hr />
          <div className='tw-grid tw-grid-cols-6 tw-gap-2 tw-py-2 tw-px-6'>
            {colors.map(color => (
              <div
                key={color}
                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 tw-flex tw-justify-center tw-items-center  ${color == selectedColor && "tw-bg-base-300"}`}
                onClick={() => selectColor(color)}>
                <div className={`tw-h-8 tw-w-8 tw-rounded-full tw-bg-[${color}]`}></div>
              </div>
            ))}
          </div>
        </div>

      )}
    </>
  );
};