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={'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