Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import { EmojiActivity } from './emojis/EmojiActivity'
import { EmojiFlags } from './emojis/EmojiFlags'
import { EmojiFood } from './emojis/EmojiFood'
import { EmojiNature } from './emojis/EmojiNature'
import { EmojiObjects } from './emojis/EmojiObjects'
import { EmojiPeople } from './emojis/EmojiPeople'
import { EmojiSymbols } from './emojis/EmojiSymbols'
import { EmojiTravel } from './emojis/EmojiTravel'

const Emojione = (props) => {
  const { onClickEmoji } = props
  const [currentTab, setCurrentTab] = useState('people')

  const emojiTabs = {
    activity: 'activity',
    flags: 'flags',
    food: 'food',
    nature: 'nature',
    objects: 'objects',
    people: 'people',
    symbols: 'symbols',
    travel: 'travel',
  }

  const handleChangeTab = (tabToChange) => {
    setCurrentTab(tabToChange)
  }

  return (
    <div className={'emojione-container'}>
      <div className="smiley-panel">
        <ul
          className="nav customtab2 nav-tabs menu-tabs"
          // style="padding: 0;"
        >
          <li
            className={`menu-item ${
              currentTab === emojiTabs.people ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.people)}>
              <i className="ti-face-smile"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.nature ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.nature)}>
              <i className="ti-gallery"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.food ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.food)}>
              <i className="fa fa-cutlery"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.activity ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.activity)}>
              <i className="ti-basketball"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.travel ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.travel)}>
              <i className="fa fa-car"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.objects ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.objects)}>
              <i className="ti-light-bulb"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.symbols ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
              <i className="ti-heart"></i>
            </a>
          </li>
          <li
            className={`menu-item ${
              currentTab === emojiTabs.flags ? 'active' : ''
            }`}
          >
            <a onClick={() => handleChangeTab(emojiTabs.flags)}>
              <i className="ti-flag-alt"></i>
            </a>
          </li>
        </ul>
        <div
          className="tab-content" /* style="margin: 0;text-align: center;" */
        >
          <div role="tabpanel" className="tab-pane active" id=""></div>
        </div>
      </div>
      <EmojiPeople
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.people}
      />
      <EmojiNature
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.nature}
      />
      <EmojiFood
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.food}
      />
      <EmojiActivity
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.activity}
      />
      <EmojiTravel
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.travel}
      />
      <EmojiObjects
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.objects}
      />
      <EmojiSymbols
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.symbols}
      />
      <EmojiFlags
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.flags}
      />
    </div>
  )
}

export default Emojione