Proyectos de Subversion LeadersLinked - Antes de SPA

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 = ({ onClickEmoji }) => {
  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="smiley-panel">
        <ul className="nav customtab2 nav-tabs menu-tabs">
          <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">
          <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}
      />
    </>
  )
}

export default Emojione