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

/* eslint-disable @typescript-eslint/restrict-template-expressions */
import { useState } from 'react'

interface Props {
  selectedEmoji: string
  selectedColor: string
  selectedShape: string
  setSelectedEmoji: (emoji: string) => void
  setSelectedColor: (color: string) => void
  setSelectedShape: (shape: string) => void
}

export const EmojiPicker = ({
  selectedEmoji,
  selectedColor,
  selectedShape,
  setSelectedEmoji,
  setSelectedColor,
  setSelectedShape,
}: Props) => {
  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: string) => {
    setSelectedEmoji(emoji)
    setIsOpen(false)
  }

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

  const selectColor = (color: string) => {
    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>
      )}
    </>
  )
}