Proyectos de Subversion LeadersLinked - Backend

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";

import styles from "./emojione.module.scss";

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={styles.emojione}>

      <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;