Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import { 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>
      <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 ? true : false}
      />
      <EmojiNature
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.nature ? true : false}
      />
      <EmojiFood
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.food ? true : false}
      />
      <EmojiActivity
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.activity ? true : false}
      />
      <EmojiTravel
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.travel ? true : false}
      />
      <EmojiObjects
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.objects ? true : false}
      />
      <EmojiSymbols
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.symbols ? true : false}
      />
      <EmojiFlags
        onClickEmoji={onClickEmoji}
        hidden={currentTab === emojiTabs.flags ? true : false}
      />
    </div>
  );
};

export default Emojione;